Question

我在开发人员工具中做了很多工作，并且喜欢在控制台中使用jQuery来运行代码片段。要将jQuery注入页面（和控制台），我将其粘贴到devtools控制台中：

var j = document.createElement('script'); j.src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(j);

有没有办法将jQuery自动注入开发人员工具控制台？理想情况下，不会影响当前页面的window.$或window.jQuery。

Answer 1

Developer Toolbar有一个inject命令，可以让你更容易地将脚本注入当前页面。它支持常用的库，如jQuery和下划线。有关更多信息，请参阅我链接的文档。

如果你想总是这样做，你可以创建一个类似于dotjs的附加组件 - 主要区别在于你需要将jQuery对象公开到页面的实际中DOM，内容脚本不够好。您可能也应该总是尝试检测现有的jQuery？我不太确定你的意思是'不影响窗口。$或当前页面的window.jQuery' - 默认情况下控制台的当前范围是当前页面。只有在调试时才会有所不同，并且在其他范围内的断点处停止。

Answer 2

您可以将以下代码复制/粘贴到控制台中，然后在 DevTools 中就可以使用 jQuery

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

// ... You might need to also run
jQuery.noConflict();

您可能会立即看到一个错误：Uncaught ReferenceError: jQuery is not defined. 忽略它 - DevTools 正在拉扯您的腿。（谷歌在幽默方面的弱小的尝试，也许......）

然后，在 DevTools 控制台中进行测试：
$('div').length; //press Enter

如果出现错误，请按以下方式尝试：
jQuery('div').length

希望第一种方法可行 - 但有时您需要使用第二种方法。

Firefox DevTools：自动注入jQuery

2 个答案: