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

Question

我正在使用 Chrome 查看网页。原始源不包含 jQuery，但使用一些 jQuery 函数来检查 DOM 会非常有帮助。更改源以包含 jQuery 脚本会很痛苦，那么是否可以在页面加载后使用 Chrome 开发人员工具将 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()在控制台中访问。

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

安装 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 建议的方法返回原始形式。

Answer 4

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

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

并回去工作！