文章

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.

原文: https://blog.wplauncher.com/run-jquery-in-chrome-console/

I’ve run into numerous situations where I need to loop through data on a website that I do not own (typically API documentation) so that I can reformat it and make it usable. For example, AWS Route 53 includes a list of top-level domains (TLDs) in a page with related data for each TLD but it’s in an HTML format. You can use JavaScript by default in the chrome console but jQuery allows me to create these one-off scripts more quickly.

Step 1: Copy the code below

Load jQuery into your current page by copying and pasting the following code into your Chrome Console.

1
2
3
4
5
#!javascript
var jqry = document.createElement('script');
jqry.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jqry);
jQuery.noConflict();

It may take a bit of time for jQuery to load. But, once jQuery is loaded, you can run your custom jQuery functions in chrome console. There may be some conflicts with other jQuery versions that may have been loaded on the page.

Step 2: Paste the code in your Browser’s Console

If you don’t know how to get to your browser’s console, make sure you right click on the page that you want to scrape and click on Inspect.

get console

Then, click on the Console tab, paste the code that you copied above it into the console, and click enter to run the code. It’ll look like the picture below:

paste the code


以下来自: https://www.voidcanvas.com/how-to-insert-run-jquery-in-chrome-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.

1
var jqry = document.createElement('script');jqry.src = "https://code.jquery.com/jquery-3.3.1.min.js";document.getElementsByTagName('head')[0].appendChild(jqry);jQuery.noConflict();

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.

本文由作者按照 CC BY 4.0 进行授权