How to insert & run jQuery in chrome console

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.

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.

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.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.