How to insert & run jQuery in chrome console

author-avatar
Paul Shan Tue Feb 21 2017

Many a times we run into the need to testing some elements in some webpages which we don’t own. May be to do some reverse engineering or just to test something.
If that webpage uses jQuery then it’s quite easy for us to do our reverse engineering; but in case jQuery is not there, it’s a headache to do stuffs with native JavaScript. Cause jQuery is always a better DOM manipulator.

To ease our life you can externally insert jQuery on that webpage from your browser’s console. All you need to do is to copy-paste and run the following code in the console.

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.1.1.min.js";
jq.onload = function(){ 
	jQuery.noConflict();
}
document.getElementsByTagName('head')[0].appendChild(jq);

Better way for regular users

If you often come across this situation and have to insert jQuery in multiple pages, you can probably save it as a bookmarklet and include it in the page just by clicking on that bookmarklet. Follow the steps below to create a bookmarklet.

Step 1: Open an empty tab in your browser.
Step 2: Bookmark that empty tab with a name.
Step 3: Now edit that saved bookmark and save the following code in the place of url or location.

javascript:var jq=document.createElement("script");jq.src="https://code.jquery.com/jquery-3.1.1.min.js",jq.onload=function(){jQuery.noConflict()},document.getElementsByTagName("head")[0].appendChild(jq);

Step 4: Save the bookmark.
Step 5: Now you can include jQuery in any of the webpages you want, just by clicking on the bookmarklet after the required webpage is loaded.

Caution

There are some webpages (Eg: gmail) who strictly doesn’t allow loading of external scripts. On those pages the approach mentioned above will not work.

Chromejquery

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
Array
yeoman

Show All