38

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.

Alpha
  • 6,876
  • 8
  • 55
  • 87

2 Answers2

100

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.

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).

Rob W
  • 315,396
  • 71
  • 752
  • 644
  • 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! – Alpha Mar 08 '12 at 21:21
  • 3
    @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`](https://developer.mozilla.org/En/DOM/Document.querySelectorAll). – Rob W Mar 08 '12 at 21:24
  • 1
    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. – Alpha Mar 08 '12 at 21:30
  • Is [this](http://www.youtube.com/watch?v=4mf_yNLlgic) video are you talking of ? and in this he shows short cut for Opera `// jquery()` – Sudarshan Dec 26 '12 at 11:21
  • Works great, unless the site has a `Content-Security-Policy` which prohibits `ajax.googleapis.com` – Jeremy Durnell Mar 15 '15 at 22:41
  • 1
    If the site uses HTTPS, then update the jquery.js URL to use HTTPS as well. Otherwise, Chrome will block loading of the script. – buzz Aug 31 '17 at 17:44
  • @buzz i've seen `//code` used as opposed to `http://` or even as opposed to `https://` – barlop Apr 07 '19 at 23:20
18

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);
  }
}());
Ravinder Kumar
  • 401
  • 4
  • 16
  • Thank you. Voted for this answer because It works on https too. – Laurent May 31 '17 at 18:29
  • 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 Apr 07 '19 at 23:18