Can I add a resource using Chrome Dev Tools?

Question

I'm viewing a webpage using Chrome. The original source does not include jQuery, but it'd be really helpful to use some jQuery functions to inspect the DOM. It would be a pain to alter the source to include the jQuery script, so is it possible to use Chrome Developer Tools to load jQuery to the DOM after the page loads? Alternately, is there a native JavaScript function that could perform the load?

I tried to edit the head tag to include the <script src="/path/to/jQuery.min.js"></script> tag, but that doesn't actually load the jQuery.min.js file.

Unfortunately, Modernizr and other asset loaders are also not included with the source.

Answer 1

You should be able to run this in your JS console.

var jq = document.createElement('script');
jq.src = "/path/to/jQuery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Alternatively you can copy the entire jQuery file into the console. Not the best option, but that would work too.

A third option is this plugin, jQueryify, I haven't used it myself, but looks promising.

Answer 2

Use requirify's awesome chrome extention and get access to require() in the console.

You can totally upgrade your testing workflow in Chrome developer console now that you can directly import npm modules into the console.

After installing requirify, you could easily add jquery to your console session by typing this into the developer console:

var $ = require('jquery');

This will fetch jQuery from npm, in turn making it available for you in the console. Now you can use jQuery in your console like you would on any webpage:

$('div').each(function(index){ //... });

Obviously this would work for your situation, but would also work in many other situations as well. A great tool to have in your toolbox!

See require() being used in the console below:

Awesome!