Firefox 开发工具:更改 JS 执行上下文

Posted

技术标签:

【中文标题】Firefox 开发工具:更改 JS 执行上下文【英文标题】:Firefox dev tools: change JS execution context 【发布时间】:2019-04-24 21:41:22 【问题描述】:

Chrome 开发工具允许更改 javascript 执行上下文。

它非常好用,我在调试过程中经常使用它。

但我需要在 Firefox 中测试我的项目,但我找不到 UI 来更改执行上下文。

火狐有这个功能吗?

【问题讨论】:

查看How to access add-on content script in Firefox console?中的解决方法 感谢您的链接,但它对我的情况没有帮助。我想在扩展的 javascript 上下文中执行一个函数来跟踪当前状态。使用 Firefox 开发工具似乎是不可能的。我看到的唯一解决方法是在内容中添加一个侦听器以执行所需的功能并从后台脚本触发执行。 您应该在问题中澄清您指的是扩展开发而不是网站开发。 【参考方案1】:

Firefox DevTools 具有相同的功能。

当一个页面至少包含一个 iFrame 时,DevTools 窗口的右上角会出现一个新按钮:

单击此按钮会打开一个菜单,您可以在其中选择 iframe。将鼠标悬停在不同的条目上甚至会突出显示页面中的 iframe 或主文档,以便于识别它们:

与 Chrome DevTools 相比,此功能会更改所有面板中的上下文,例如Inspector 也将被限制在所选 iframe 的文档中。

您可能需要先启用它。为此,请打开“设置”面板(例如,按 F1),然后选中选项选择 iframe 作为当前目标文档

【讨论】:

感谢塞巴斯蒂安,您的详细回复。如果我理解正确,我只能更改 iFrame 的 js 上下文。是否可以更改当前在浏览器中运行的插件的 js 上下文? 这些天我对 Firefox 插件开发不太感兴趣,但如果它不能在普通的 DevTools 中工作,它可能会在 Browser Toolbox 中工作。该窗口看起来与普通的 DevTools 基本相同,但允许您检查浏览器上下文中的所有内容。 现在好像默认开启了,我用的是FF 84 对,当页面上至少有一个iFrame时,按钮会自动显示。我已经稍微更新了答案以反映这一点。 @SebastianZartner ;谢谢!!!!只是为我省去了很多挫败感。我的 iframe 位于不同的域中,因此默认情况下我无法访问内容。使用按钮,中提琴,有 iframe 的 URL。 许多优点

以上是关于Firefox 开发工具:更改 JS 执行上下文的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Chrome 开发工具或 Firefox 开发工具中查看 JS 正在改变我的元素的样式?

图解js中的EventLoop

Firefox:编辑 HTML 并实时查看更改

进阶学习js中的执行上下文

如何理解TensorFlow中的tensor

对于 NSLayoutConstraint 不执行动画的处理: