我可以使用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);
})();

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