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

Answer 1

This is the JS code snippet I use frequently to tackle this problem.

It's the same as Matt's but wrapped in an IIFE to make it easier for you or any other person to fire up jQuery in your browser environment just like that.

(function() {
var h = document.head;
var scr = document.createElement('script');
scr.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
h.appendChild(scr);
})();

If you would like to use $ function name for other non jQuery related functionality, you can relinquish $ and assign your jQuery function to another name or back to the original form jQuery() by calling the $.noConflict() method as advised by Matt above.

Answer 2

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 3

Simply copy paste this in the browser console

var script = document.createElement("script");
script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js";
document.body.appendChild(script);

And get back to work !

Answer 4

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!