Can I add a resource using Chrome Dev Tools?

google-chrome, google-chrome-devtools, javascript, jquery

Solution

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.

Problem

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.

Original source