我可以使用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 file复制到控制台中。不是最好的选择，但也可以。

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

Answer 2

使用requirify's awesome chrome extention并访问控制台中的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);
})();

如果您想将$函数名称用于其他非jQuery相关功能，您可以放弃$并将您的jQuery函数指定为其他名称或返回原始表单jQuery()通过上面Matt建议调用$.noConflict()方法。

Answer 4

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

即可

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

然后重新开始工作！