标签: firefox-developer-tools

我为Firefox和Chrome开发了一个附加组件.它有内容脚本.我想在浏览器选项卡的控制台中访问它们(在Firefox Web控制台上).例如,我想输入在控制台的内容脚本中定义的全局变量,它将输出其值.

在Chrome中,我可以通过按下打开控制台F12,然后导航到开发人员工具中的控制台选项卡.它在过滤器按钮后面有一个dropbox,用于选择我所在的上下文(页面/内容脚本):

在Firefox中,如何做同样的事情？

if(true) {
    let m = "yo";

    console.log(m);
}

console.log(m)

输出:

ReferenceError: m is not defined
yo

所以第4行的代码正在第8行的代码之后执行.

我的用法let与此有关吗？

编辑:阅读评论后,我意识到这可能是因为我的运行时.这是我每晚在Firefox中看到它的方式:

编辑2:如果这确实只是我的运行时,那么生产代码有什么影响,因为这样的事情？跨浏览器的行为不一致？我该如何防范呢？

就像标题所说，我想知道是否可以更改Firefox Developer开发工具的颜色主题。浅色和深色主题很好，但是我想使用Monokai之类的代码颜色主题，该怎么做？

在下面，您可以在开发工具中看到当前的黑暗主题：

[

我想知道是否有办法在 Firefox 或 Chrome 的检查器（开发人员工具）中完全像开发工具显示的那样复制 html。

许多页面没有格式良好的代码。如果您转到“查看源代码”(CTRL+U)，有时会一团糟。两个浏览器的开发工具都做了非常整洁的格式和缩进，但我不知道如何复制它。

例如，检查器中的代码如下所示：

[Firefox 开发工具中的格式化代码]

粘贴到崇高的文本，它只是一行代码：

<div class="mod_customnav block"><a href="startseite.html#skipNavigation50" class="invisible">Navigation überspringen</a><ul class="level_1"><li class="verband first"><a href="vereine.html" title="Die Vereine im Badischen Sportschützenverband" class="verband first">Vereine</a></li><li class="geschaeftsstelle"><a href="oeffnungzeiten.html" title="Die Öffnungszeiten der Geschäftsstelle" class="geschaeftsstelle">Öffnungzeiten</a></li><li class="geschaeftsstelle"><a href="anfahrtsplan.html" title="So finden Sie uns" class="geschaeftsstelle">Anfahrtsplan</a></li><li class="formulare"><a href="waffenrecht.html" title="Waffenrechtliche Formulare" class="formulare">Waffenrecht</a></li><li><a href="sitemap.html" title="Die Website im Überblick">Sitemap</a></li><li><a href="kontakt.html" title="Kontaktformular">Nachricht an uns</a></li><li class="last"><a href="impressum.html" title="Impressum" class="last">Impressum</a></li></ul><a id="skipNavigation50" class="invisible">&nbsp;</a></div>

我正在使用几个没有.map文件的第三方压缩的Javascript文件。当我在Firefox DevTools中调试时，它始终显示以下错误：

Source map error: request failed with status 404
Resource URL: https://foo.domain.com/widgets/widgets.min.js
Source Map URL: widgets.min.js.map

这确实让人分心，因为其中有许多文件，它们确实污染了控制台。

无论如何，有没有关闭这些警告？

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

它非常方便，我在调试过程中经常使用它。

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

火狐有这个功能吗？

我是一个菜鸟问题，因为我只是在学习 JS，所以我还不擅长它。

我目前正在构建一个网站广告，添加了一些 JS 片段来执行一些操作。现在我的页脚有opacity: 0并且它不是来自 CSS，因此必须来自某些 JS，但我找不到它。如何在 Chrome 或 Firefox DevTools 中找到什么 JS 正在修改特定 HTML 元素的样式？

这是显示代码的屏幕截图：

我检查了我所有的 JS 文件，但找不到任何可以提供页脚的内容opacity:0。

当站点收到高流量时，Mozilla Firefox 中的选项卡会停止加载并显示此错误消息“ PR_CONNECT_RESET_ERROR”，如屏幕截图所示。

我想要的是，该选项卡应该持续加载，直到它收到来自站点服务器的响应而不显示此错误，或者我想增加它在默认情况下一直尝试连接到该站点服务器的持续时间（时间或数量）。

我不知道是否可行，但我尝试的是，我从about:config. 我network.http.keep-alive.timeout从 120 增加到 215，network.http.max-persistent-connections-per-server从 6 增加到 20。但我没有发现任何明显的变化。

是否有更好的可能性来实现我的期望？

注意：我从具有不同会话的不同选项卡向相同的 url(www.example.com) 发出大约 30-40 个请求。

使用 Chrome 或 Firefox 开发人员工具时，我无法查看某些 reducer 变量的值。例如，newItem在下面的 Chrome 调试器屏幕截图中：

铬合金：

火狐：

代码运行良好。日志语句输出正确，但通过调试器检查只显示undefined. 但是，如果我查看 Scope 视图，我可以看到一个名为的变量_newItem，它具有所有正确的属性和值（由于它们可能敏感而被隐藏）。

似乎导致此问题的原因是当我对状态进行浅层克隆时：（let newState = {...state};使用扩展语法或Object.assign({}, state).

每个后续变量基于newState显示undefined但_variableName[0-9]*在开发工具范围视图上都有一个对应的变量。

这不会发生在我们的 React 组件或其他非 Reducer 代码中。

似乎 Redux、源映射和开发人员工具可能存在一些问题，但我无法在 Redux 文档或问题跟踪器或 Chrome 错误跟踪器中找到任何搜索结果。

Redux：4.0.5
操作系统：Windows 10 x64

测试： Chrome: 81.0.4044.122, Canary: 84.0.4125.0
Firefox: 75.0, Dev. 版：76.0b4 (64-bit)

注：这是不一样的这个问题，与刚刚Chrome的闭包变量的优化交易。

如何截取半透明的网页节点截图？

例如，捕获具有透明背景的特定 div 的文本渲染。

Chrome/Firefox devtools 的“节点截图”功能有两个问题：

1. （次要）它们捕获节点的区域，但包括其他节点的内容。
2. （主要）我不知道如何，或者是否可以擦除背景并捕获为透明背景。