Command for loading jQuery on Google Chrome inspector?

Question

I remember seeing that there was a specific command you could put on Google Chrome's inspector console for it to load jQuery and allow you to execute jQuery commands.

However, I cannot remember which command it was, and searching online only brings me unrelated results.

Anyone knows which is that command?

Thanks!

EDIT: Years later I had realized that I was asking for the $$ function in the console. However, this is not jQuery but provides a similar selector option, most likely a shorthand for document.querySelectorAll. The answers here address adding jQuery for real, with all of its functionality.

Solution 1

You mean, a script to load jQuery in an arbitrary page? I have constructed the following cross-browser bookmarklet for this purpose:

javascript:if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);

It detects whether jQuery exists. If it does, a confirmation dialog appears, in which the current version is shown, so that you can decide whether it's OK to overwtite the existing jQuery object.

Currently, jQuery 1.8 is loaded from a CDN over SSL.

• If you want to load a different version, replace '1.8' with e.g. '1.7.1'.
• If you want to load a compressed version, replace jquery.js with jquery.min.js.
• If you don't mind loading jQuery over http:, Google's CDN can be replaced with:
  • http://code.jquery.com/jquery.js - Latest version
  • http://code.jquery.com/jquery-latest.js - Latest version
  • http://code.jquery.com/jquery-1.8.0.js - Version 1.8

To save you time from editing, here's the same bookmarklet as the top of the answer, but getting the latest version (instead of a fixed one) from http://code.jquery.com/:

javascript:if(!window.jQuery||confirm('Overwrite\x20current\x20version?\x20v'+jQuery.fn.jquery))(function(d,s){s=d.createElement('script');s.src='http://code.jquery.com/jquery.js';(d.head||d.documentElement).appendChild(s)})(document);

Note: Having the latest version is nice, but don't be surprised when jQuery "behaves weird" (=updated).

Solution 2

You can also create a chrome snippet which load jQuery on chrome inspector ( how create custom snippets )

Snippet code:

(function() {
  if (! window.jQuery ) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'; // you can change this url by latest jQuery version
    (document.getElementsByTagName('head')[0] ||
      document.getElementsByTagName('body')[0]).appendChild(s);
  }
}());

Comments

[Alpha]

Thanks! That is pretty cool. I still remember seeing a built-in command that would load jQuery with just a short command written in the console. Still, you saved me from my current situation, thanks!

[Rob W]

@Alpha Do you mean "jQuery-like" selectors? When the page does not define these,$ is short for document.getElementById, and $$ is short for document.querySelectorAll.

[Alpha]

Maybe I'm confused... I remember seeing a video of a Google guy, he was showing that a page may not have had jQuery loaded, but if he wanted all that capability to troubleshoot, there was this command that he would enter, and jQuery would be loaded directly into the page (and so, he proceeded to show the use of complex selectors and jQuery functions as example). However, I can't remember which video was it, or what the command was like.

[Sudarshan]

Is this video are you talking of ? and in this he shows short cut for Opera // jquery()

[Jeremy Durnell]

Works great, unless the site has a Content-Security-Policy which prohibits ajax.googleapis.com

[Laurent]

Thank you. Voted for this answer because It works on https too.

[buzz]

If the site uses HTTPS, then update the jquery.js URL to use HTTPS as well. Otherwise, Chrome will block loading of the script.

[barlop]

can make a bookmark for it . javascript:!function(){......}(); and that if statement with all its contents can go in the {}. Works in the address bar too of course

[barlop]

@buzz i've seen //code used as opposed to http:// or even as opposed to https://