javascript 我可以使用 Chrome Dev Tools 添加资源吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15954721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I add a resource using Chrome Dev Tools?
提问by Jeromy French
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?
我正在使用 Chrome 查看网页。原始源不包括 jQuery，但使用一些 jQuery 函数来检查 DOM 真的很有帮助。更改源以包含 jQuery 脚本会很痛苦，那么是否可以在页面加载后使用 Chrome Developer Tools 将 jQuery 加载到 DOM？或者，是否有可以执行加载的本机 JavaScript 函数？
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.
我试图编辑 head 标签以包含该<script src="/path/to/jQuery.min.js"></script>标签，但这实际上并没有加载 jQuery.min.js 文件。
Unfortunately, Modernizr and other asset loaders are also not included with the source.
不幸的是，源代码中也不包含 Modernizr 和其他资产加载器。
采纳答案by Matt Busche
You should be able to run this in your JS console.
您应该能够在您的 JS 控制台中运行它。
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 fileinto the console. Not the best option, but that would work too.
或者，您可以将整个jQuery 文件复制到控制台中。不是最好的选择，但这也行。
A third option is this plugin, jQueryify, I haven't used it myself, but looks promising.
第三种选择是这个插件jQueryify，我自己没有使用过它，但看起来很有希望。
回答by radiovisual
Use requirify's awesome chrome extentionand get access to require()in the console.
使用Requireify 的出色 chrome 扩展并require()在控制台中访问。
You can totally upgrade your testing workflow in Chrome developer console now that you can directly import npm modules into the console.
您现在可以在 Chrome 开发者控制台中完全升级您的测试工作流程，因为您可以直接将 npm 模块导入控制台。
After installing requirify, you could easily add jquery to your console session by typing this into the developer console:
安装 requirify 后，您可以通过在开发人员控制台中键入以下内容轻松地将 jquery 添加到控制台会话中：
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:
这将从 npm 中获取 jQuery，进而使其在控制台中可供您使用。现在您可以像在任何网页上一样在控制台中使用 jQuery：
$('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:
请参阅require()在下面的控制台中使用：
Awesome!
惊人的！
回答by Mr. X
This is the JS code snippet I use frequently to tackle this problem.
这是我经常用来解决这个问题的 JS 代码片段。
It's the same as Matt's but wrapped in an IIFEto make it easier for you or any other person to fire up jQuery in your browser environment just like that.
它与 Matt 的相同，但包含在IIFE 中，使您或任何其他人更容易在您的浏览器环境中启动 jQuery，就像那样。
(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.
如果您想将$函数名称用于其他非 jQuery 相关功能，您可以放弃$并将您的 jQuery 函数分配给另一个名称或jQuery()通过调用上述$.noConflict()Matt 建议的方法返回原始形式。
回答by nehem
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 !
回去工作吧！
