8

I'm doing quite a bit of work in the developer tools, and like to use jQuery in the console to run code snippets. To inject jQuery into the page (and the console), I'm pasting this into the devtools console:

var j = document.createElement('script'); j.src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(j);

Is there a way to inject jQuery automatically into the developer tools console? Ideally, without affecting window.$ or window.jQuery for the current page.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
silverwind
  • 3,296
  • 29
  • 31
  • 1
    Personally, I've been using a JS bookmarklet that will load it on click, but theoretically you could load it with a Greasemonkey script if you have the extension. Note that even when you use the code above it modifies `window.$` and `window.jQuery`. `$.noConflict()` might help if you want to use `window.$` for something else. – arcyqwerty Oct 07 '14 at 22:17
  • Yeah, I thought about doing a greasemonkey script, but that will impact all page loading. I wonder if there's some hidden option in DevTools to just inject a script into the console, without it affecting the document. – silverwind Oct 07 '14 at 22:19
  • Would definitely be interested in seeing that. If you're only working on certain pages/domains, you could always en/disable the script or modify the `@include` and `@match` as you'd like, but for many independent pages, that could be a hassle. – arcyqwerty Oct 07 '14 at 22:22
  • Your question is a little hard to understand but I use injection of jQuery in Selenium tests, like this: http://jonausten.info/2014/06/23/how-to-add-a-jgrowl-wrapper-to-your-selenium-framework/ – djangofan Oct 07 '14 at 22:26
  • Rephrased the question a bit. I'm not using Selenium, just the plain built-in console of the DevTools. – silverwind Oct 07 '14 at 22:30

2 Answers2

5

The Developer Toolbar has an inject command that will allow you to inject a script into the current page a bit more easily. It supports commonly used libraries like jQuery and underscore. For more, see the docs I linked to.

If you wanted to always do this, you could create an add-on similar to dotjs - the main difference is that you would need to expose the jQuery object into the page's actual DOM, a content script isn't good enough. You should probably also always try to detect an existing jQuery? I'm not quite sure what you mean by 'without affecting window.$ or window.jQuery for the current page' - the current scope of the console by default is the current page. This is only different if you are debugging and are stopped at a breakpoint inside some other scope.

therealjeffg
  • 5,790
  • 1
  • 23
  • 24
  • 1
    You're right, I was under the illusion that the console ran in a different scope. I'm still wondering how variables like `$` (an alias to document.querySelector) are introduced in the console, thought. These aren't properties on `window`. I think `inject` would be technically equal to running a greasemonkey script. – silverwind Oct 08 '14 at 02:50
  • That depends, I thought greasemonkey scripts were a separate sandbox. Using the Add-on SDK you can clone objects into content safely now, see [this](https://blog.mozilla.org/addons/2014/04/10/changes-to-unsafewindow-for-the-add-on-sdk/). As far as the scope of the console is concerned, that's some devtools magic that handles console commands and utilities like clear() and $$ correctly. – therealjeffg Oct 08 '14 at 02:54
  • link-mostly answers break. Like this one did... Please consider not only fixing link, but adding relevant part of the link in the answer, as it is not useful without it. – Matija Nalis Feb 18 '21 at 15:40
2

You can copy/paste the below code into the console and jQuery will be available to you in DevTools

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

// ... You might need to also run
jQuery.noConflict();

You might immediately see an error: Uncaught ReferenceError: jQuery is not defined. Ignore it - DevTools is pulling your leg. (Google's weak attempt at humor, maybe...)

Then, in DevTools console, test it:
$('div').length; //press Enter

If you get an error, try it this way:
jQuery('div').length

Hopefully, the first will work - but sometimes you'll need to use the second method.

cssyphus
  • 37,875
  • 18
  • 96
  • 111