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

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!