我可以使用Chrome开发工具添加资源吗？

Question

我正在使用Chrome查看网页。 原始源代码不包含jQuery，但使用一些jQuery函数来检查DOM会非常有用。 改变源代码以包含jQuery脚本会很痛苦，因此可以使用Chrome Developer Tools在页面加载后将jQuery加载到DOM吗？ 或者， 是否有可以执行加载的本机JavaScript函数？

我尝试编辑head标记以包含<script src="/path/to/jQuery.min.js"></script>标记，但这实际上并不加载jQuery.min.js文件。

不幸的是，Modernizr和其他资产加载器也不包含在源代码中。

Answer 1

您应该能够在JS控制台中运行它。

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

或者，您可以将整个jQuery文件复制到控制台中。 不是最好的选择，但那也行得通。

第三种选择是这个插件， jQueryify ，我自己没有使用它，但看起来很有希望。

Answer 2

使用requirify的令人敬畏的chrome扩展并访问控制台中的require() 。

您可以在Chrome开发者控制台中完全升级测试工作流，因为您可以直接将npm模块导入控制台。

安装requirify后，您可以通过在开发人员控制台中输入以下内容，轻松地将jquery添加到控制台会话中：

var $ = require('jquery');

这将从npm获取jQuery，然后在控制台中为您提供。 现在，您可以在控制台中使用jQuery，就像在任何网页上一样：

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

显然这对你的情况有用，但也适用于许多其他情况。 在您的工具箱中拥有一个很棒的工具！

请参阅下面的控制台中使用的require() ：

真棒！

Answer 3

这是我经常用来解决这个问题的JS代码片段。

它与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);
})();

如果你想将$ function name用于其他非jQuery相关的功能，你可以放弃$并将你的jQuery函数分配给另一个名称，或者通过调用Matt建议的$.noConflict()方法返回原始形式jQuery()以上。

Answer 4

只需将其粘贴到浏览器控制台即可

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

然后回去工作！