Firefox DevTools: Automatically injecting jQuery

Question

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.

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
– arcyqwerty, Commented Oct 7, 2014 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
– silverwind, Commented Oct 7, 2014 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
– arcyqwerty, Commented Oct 7, 2014 at 22:22
Your question is a little hard to understand but I use injection of jQuery in Selenium tests, like this: jonausten.info/2014/06/23/… — djangofan
– djangofan, Commented Oct 7, 2014 at 22:26
Rephrased the question a bit. I'm not using Selenium, just the plain built-in console of the DevTools. — silverwind
– silverwind, Commented Oct 7, 2014 at 22:30

therealjeffg · Accepted Answer · 2014-10-08 01:05:28Z

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.

answered Oct 8, 2014 at 1:05

therealjeffg

5,8301 gold badge25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

silverwind Over a year ago

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.

therealjeffg Over a year ago

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

Matija Nalis Over a year ago

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.

cssyphus · Accepted Answer · 2021-02-20 03:54:14Z

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.

answered Feb 20, 2021 at 3:54

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Collectives™ on Stack Overflow

Firefox DevTools: Automatically injecting jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related