Include jQuery in the JavaScript Console

Question

Is there an easy way to include jQuery in the Chrome JavaScript console for sites that do not use it  For example  on a website I would like to get the number of rows in a table  I know this is really easy with jQuery      element   length    The site does not use jQuery  Can I add it in from the command line

User · Answer

Turnkey solution    Put your code in yourCode here function  And prevent HTML without HEAD tag    x000D   x000D   function head    x000D    var jq   document createElement  script    x000D    jq src    https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js   x000D      head  amp  amp  head 0      document firstChild  appendChild jq   x000D     document getElementsByTagName  head     x000D   x000D  function jQueryReady     x000D    if  window jQuery    x000D      jQuery noConflict    x000D      yourCode here jQuery   x000D      else   x000D      setTimeout jQueryReady  100   x000D      x000D    x000D   x000D  jQueryReady    x000D   x000D  function yourCode here      x000D    console log  OK    x000D       body   html   lt h1 gt Hello world   lt  h1 gt     x000D    x000D   x000D   x000D

User · Answer

Use the jQueryify booklet   http   marklets com jQuerify aspx  Instead of copy pasting the code in the other answers  this ll make it a clickable bookmark

User · Answer

If you want to use jQuery frequently from the console you can easily write a userscript  First  install Tampermonkey if you are on Chrome and Greasemonkey if you are on Firefox  Write a simple userscript with a use function like this   var scripts        function use libname        var src      if  scripts indexOf libname     -1            switch  libname toLowerCase                  case  jquery                   src      ajax googleapis com ajax libs jquery 1 10 2 jquery min js                   break              case  angularjs                   src      ajax googleapis com ajax libs angularjs 1 0 7 angular min js                   break                  else           console log  Library already in use             return            if  src            scripts append libname           var script   document createElement  script            script src   src          document body appendChild scr         else           console log  Invalid Library             return

User · Answer

The top answer  by jondavidjohn is good but I d like to tweak it to address a couple of points    Various browsers issue a warning when loading a script from http to a page on https  Just changing jquery com s protocol to https results in a warning if you try it straight from the browser s URL bar  This is probably not the site you are looking for  I like to use Google s CDN when I m using the console to experiment with Google sites such as Gmail    My only issue is that I have to include a version number where in the console I really always want the latest   var jq   document createElement  script    jq src      ajax googleapis com ajax libs jquery 1 8 3 jquery min js   document getElementsByTagName  head   0  appendChild jq   jQuery noConflict

User · Answer

this answer based on  genesis answer  at first I tried the bookmark version  jondavidjohn  and it is not working  so I change it to this  add it to your bookmark    javascript  function   var s   document createElement  script   s src      code jquery com jquery-2 2 4 min js  document getElementsByTagName  head   0  appendChild s  console log  jquery loaded          words of caution  is not tested in chrome but work in firefox  and not tested in conflict environment

User · Answer

Copy everything from  https   code jquery com jquery-3 4 1 min js   And paste it into console  Works perfectly

User · Answer

One of the shortest ways would be just copy pasting the code below to the console   var jquery   document createElement  script     jquery src    https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js   document head appendChild jquery

User · Answer

Per this answer   fetch  https   code jquery com jquery-latest min js   then r   gt  r text    then r   gt  eval r     For some reason I have to execute it twice to get the new      which I have to do with the other methods as well   but it works   This is the equivalent if your browser isn t so modern   fetch  http   code jquery com jquery-latest min js   then function r  return r text     then function r  eval r

User · Answer

I just made a jQuery 3 2 1 bookmarklet with error-handling  only load if not already loaded  detect version if already loaded  error message if error while loading   Tested in Chrome 27  There is no reason to use the  old  jQuery 1 9 1 on Chrome browser since jQuery 2 0 is API-compatible with 1 9   Just run the following in Chrome s developer console or drag  amp  drop it in your bookmark bar   javascript   function   if typeof jQuery    undefined   window jQuery  loading  var  a document createElement  script   a type  text javascript  a src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  a onload function   console log  jQuery    jQuery fn jquery    loaded  successfully     a onerror function   delete  jQuery alert  Error  while  loading  jQuery     document getElementsByTagName  head   0  appendChild a  else if typeof jQuery    function   alert  jQuery     jQuery fn jquery     is  already  loaded    else alert  jQuery  is  already  loading               Readable source-code is available here

User · Answer

intuitive one-liner  document write unescape   3Cscript src  https   code jquery com jquery-3 1 1 min js  3E 3C script 3E        You can change the src address  I referred to ReferenceError  Can  39 t find variable  jQuery

User · Answer

Here is alternative code   javascript  function    var url      ajax googleapis com ajax libs jquery 1 jquery min js   var n document createElement  script   n setAttribute  language   JavaScript   n setAttribute  src  url   rand   new Date   getTime    document body appendChild n          which can be pasted either directly in Console or create a new Bookmark page  in Chrome right-click on the Bookmark Bar  Add Page     and paste this code as URL   To test if that worked  see below   Before       Uncaught TypeError    is not a function        After

User · Answer

Adding to  jondavidjohn s answer  we can also set it as a bookmark with URL as the javascript code   Name  Include Jquery  Url   javascript var jq   document createElement  script   jq src      ajax googleapis com ajax libs jquery 1 jquery min js  document getElementsByTagName  head   0  appendChild jq   setTimeout function    jQuery noConflict    console log  jQuery loaded       1000  void 0     and then add it to the toolbar of Chrome or Firefox so that instead of pasting the script again and again  we can just click on the bookmarklet

User · Answer

Post 2020 method  using dynamic import  self executing IIFE  asynchronous function   x000D   x000D   async      gt        await import  https   code jquery com jquery-2 2 4 min js          Library ready     console log jQuery       x000D   x000D   x000D    Another example https   caniuse com es6-module-dynamic-import

User · Answer

Modern browsers  tested on Chrome  Firefox  Safari  implement some helper functions using the dollar sign   that are very similar to jQuery  if the website doesn t define something using window      Those utilities are quite useful for selecting elements in the DOM and modifying them   Docs  Chrome  Firefox

User · Answer

If you re looking to do this for a userscript  I wrote this  http   userscripts org scripts show 123588  It ll let you include jQuery  plus UI and any plugins you d like   I m using it on a site that has 1 5 1 and no UI  this script gives me 1 7 1 instead  plus UI  and no conflicts in Chrome or FF   I ve not tested Opera myself  but others have told me it s worked there for them as well  so this ought to be pretty well a complete cross-browser userscript solution  if that s what you need to do this for

User · Answer

Run this in your browser s JavaScript console  then jQuery should be available    var jq   document createElement  script    jq src    quot https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js quot   document getElementsByTagName  head   0  appendChild jq          give time for script to load  then type  or see below for non wait option  jQuery noConflict     NOTE  if the site has scripts that conflict with jQuery  other libs  etc   you could still run into problems  Update  Making the best better  creating a Bookmark makes it really convenient  let s do it  and a little feedback is great too   Right click the Bookmarks Bar  and click Add Page Name it as you like  e g  Inject jQuery  and use the following line for URL    javascript  function e s  e src s e onload function   jQuery noConflict   console log  jQuery injected    document head appendChild e     document createElement  script      code jquery com jquery-latest min js    Below is the formatted code  javascript   function e  s        e src   s      e onload   function             jQuery noConflict            console log  jQuery injected               document head appendChild e      document createElement  script       code jquery com jquery-latest min js    Here the official jQuery CDN URL is used  feel free to use your own CDN version

User · Answer

Run this in your console  var script   document createElement  script   script src    https   code jquery com jquery-3 4 1 min js  document getElementsByTagName  head   0  appendChild script     It creates a new script tag  fills it with jQuery and appends to the head

User · Answer

I m a rebel   Solution  don t use jQuery  jQuery is a library to abstract the DOM inconcistencies across the browsers  Since you re in your own console  you don t need this kind of abstraction   For your example       element   length       is an alias to document querySelectorAll in the console    For any other example  I m sure I can find anything  Especially if you re using a modern browser  Chrome  FF  Safari  Opera    Besides  knowing how the DOM works wouldn t hurt anyone  it would only increase your level of jQuery  yes  learning more about javascript makes you better at jQuery

User · Answer

It s pretty easy to do this manually  as the other answers explain  But there s also the jQuerify plug-in

User · Answer

FWIW  Firebug embeds the include special command  and jquery is aliased by default  https   getfirebug com wiki index php Include  So in your case  you just have to type     include  jquery      Florent

[javascript] Include jQuery in the JavaScript Console

Turnkey solution :

Examples related to javascript

Examples related to jquery