Javascript Firefox开发工具：自动注入jQuery

我在开发人员工具中做了很多工作，并且喜欢在控制台中使用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自动注入开发者工具控制台？理想情况下，不影响当前页面的

窗口。$

或

窗口.jQuery

。

有一个inject命令，允许您更轻松地将脚本插入当前页面。它支持jQuery和下划线等常用库。有关更多信息，请参阅我链接到的文档

---

如果您想一直这样做，您可以创建一个类似的附加组件-主要区别是您需要将jQuery对象公开到页面的实际DOM中，内容脚本还不够好。您可能还应该始终尝试检测现有的jQuery？我不太清楚您所说的“不影响当前页面的window.$或window.jQuery”是什么意思——默认情况下，控制台的当前范围是当前页面。只有当您正在调试并且在某个其他作用域内的断点处停止时，这才会有所不同。

您可以将以下代码复制/粘贴到控制台中，jQuery将在DevTools中提供给您

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();

您可能会立即看到一个错误：

uncaughtreferenceerror:jQuery未定义。

忽略它-DevTools正在拖您的后腿。（谷歌在幽默方面的微弱尝试，也许…）

然后，在DevTools控制台中测试它：

$（'div'）。长度//按Enter键

如果出现错误，请尝试以下方法：

jQuery（'div'）。长度

希望第一种方法能起作用，但有时您需要使用第二种方法。
就我个人而言，我一直在使用一个JS bookmarklet，它会在单击时加载，但理论上，如果您有扩展，您可以使用Greasemonkey脚本加载它。请注意，即使使用上面的代码，它也会修改
window.$
和
window.jQuery
<代码>$.noConflict（）

如果您想使用

窗口。$

进行其他操作，可能会有所帮助。是的，我曾考虑过使用greasemonkey脚本，但这会影响所有页面加载。我想知道DevTools中是否有隐藏的选项，可以在不影响文档的情况下将脚本注入控制台。我肯定有兴趣看到这一点。如果您只在某些页面/域上工作，您可以随时打开/禁用脚本或根据需要修改

@include

和

@match

，但对于许多独立页面，这可能会很麻烦。您的问题有点难理解，但我在Selenium测试中使用了jQuery注入，像这样：把问题重新措辞一下。我没有使用Selenium，只是使用DevTools的普通内置控制台。你是对的，我有一种错觉，认为控制台运行在不同的范围内。我仍然在想，像

$

（document.querySelector的别名）这样的变量是如何在控制台中引入的。这些不是

窗口上的属性。我认为
inject
在技术上等同于运行greasemonkey脚本。这取决于，我认为greasemonkey脚本是一个单独的沙箱。使用附加SDK，您现在可以安全地将对象克隆到内容中，请参阅。就控制台的作用域而言，这是一些处理控制台命令和实用程序（如clear（）和$$correct.link-break）的devtools魔术。就像这个一样。。。请考虑不仅固定链接，而且在答案中添加链接的相关部分，因为没有它是没有用的。