标签: firefox-developer-tools

刷新页面后将焦点设置在网页上而不是 Firefox 调试器上

我正在使用默认的 Firefox Web 开发人员工具。火狐浏览器 20.0、Mac OS X 10.7。

如果我打开开发人员工具的调试器面板(但未聚焦),并刷新页面,焦点将转到调试器面板而不是刷新的页面。我可以将焦点设置为转到刷新的页面吗?

如果我打开 Web 控制台面板,这不会抢走焦点 - 理想情况下,我想让调试器以相同的方式运行。

我的程序使用文档keyupkeydown事件,并且页面需要焦点才能使它们工作。每次都必须单击页面,这令人惊讶地烦人(这只是一件小事,但它使每次刷新所需的工作量加倍!)。

javascript firefox dom-events firefox-developer-tools

5
推荐指数
1
解决办法
1009
查看次数

默认在新打开的选项卡上启用 Firefox DevTools(如果之前已启用)

早些时候,当我使用 Firebug 并打开新选项卡时 - Firebug 已在那里激活。现在,在 Firefox 51.0.1 中,我需要F12每次按一次才能打开 Firefox DevTools。如何在新标签页中默认激活它们?

about:config中的allPagesActivation选项没有帮助。

mozilla firefox-developer-tools

5
推荐指数
1
解决办法
4073
查看次数

FireFox 在样式编辑器中显示 css 文件,但在网络监视器中不显示

我的 CSS 文件在 FireFox (52.0.1) 中正确加载。它们列在“样式编辑器”选项卡中,但不在“网络监视器”选项卡中。无论我在“网络监视器”选项卡中单击“全部”还是“CSS”,都不会显示任何 CSS 文件。

我将 css 文件包含在其中,如下<head>所示:

<link rel="stylesheet" type="text/css" href="https://{path}/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="https://{path}/plugins/components/jquery-ui/themes/base/all.css" media="all">
Run Code Online (Sandbox Code Playgroud)

选择“全部”后,CSS 文件不会显示在“网络监视器”选项卡中。

选择“CSS”后,CSS 文件不会显示在“网络监视器”选项卡中。

CSS 文件显示在“样式编辑器”选项卡中。

考虑到有 CSS 选项,我假设它们应该显示在“网络监视器”选项卡中,那么会出现什么情况呢?

css firefox network-monitoring firefox-developer-tools

5
推荐指数
1
解决办法
746
查看次数

Greasemonkey XHR 未显示在 Firefox 网络开发工具中

我编写了一个脚本作为用户脚本,并使用 Greasemonkey 在特定网站上运行它。

它工作得很好,但我想在 Firefox 开发者工具网络选项卡中查看我的脚本发送的请求。目前它显示页面的请求而不是我的脚本的请求。

我应该怎么办?

javascript firefox-developer-tools firefox-57+ greasemonkey-4

5
推荐指数
1
解决办法
1853
查看次数

用于重定向的 Firefox 开发者工具的网络选项卡中显示的大小错误(302 和 301)

我遇到这种情况:向端点发出图像请求image,传入引用和宽度作为参数,然后服务器返回到图像资源的 302 重定向。此时 302 触发 301 到另一个域,然后在 2 次重定向后加载图像。图像文件大小为 18KB。

现在我遇到的“问题”/问题是,当查看这 3 个请求的 Firefox 调试器工具(网络选项卡)时,我看到它显示 3 次 18KB 被传输,但重定向应该小得多(范围100B-300B)。

Firefox 网络选项卡的屏幕截图 在此输入图像描述

这是 Firefox 开发人员工具中的错误还是我在这里遗漏了一些概念并且浏览器实际上为每个图像下载了这么多?

查看 chrome 开发人员工具中的同一页面,我看到的内容更像我所期望的: 在此输入图像描述

然后我也使用 ARC 运行相同的请求,我看到的响应显示在下一张图片上(并且还使用curl沿着相同的线路获取响应)。在此输入图像描述

我使用的是 Firefox 62.0.2(64 位)浏览器和 chrome 68.0.3440.106。

有任何想法吗?

firefox-developer-tools

5
推荐指数
0
解决办法
392
查看次数

从开发工具中的检查元素查找原始源文件路径

我正在尝试为使用 React 和 Webpack 构建的大型 Web 应用程序添加可访问性。这需要从应用程序返回源文件。有没有办法查看代码最初来自哪个文件?检查元素和查看源代码很好,但我找不到生成代码的源文件的路径。有没有办法在开发工具(chrome 或 firefox 开发人员版)中执行此操作,或者我是否一直在搜索整个项目 src 文件夹中查找将我指向该文件的代码?它是一个单页面应用程序,因此不像检查网址那么容易。

编辑:我们也使用 babel

EDIT2:更改名称以澄清我正在寻找文件的原始源代码路径

google-chrome-devtools firefox-developer-tools reactjs webpack babeljs

5
推荐指数
1
解决办法
6万
查看次数

在 Firefox 中查看服务器发送的事件

当您需要来自服务器的事件的单向通道时,SSE是 WebSocket 的一种简单而直接的替代方案。

在 Chrome 开发工具的“网络”选项卡中,您可以单击 SSE 源自的资源(url),并在其自己的选项卡中查看流。我似乎在 Firefox 中找不到这个功能。

有没有一种简单的方法可以在 Firefox 中查看服务器发送的事件,不需要我更改源代码(插入日志语句)?

firefox firefox-developer-tools

5
推荐指数
1
解决办法
2746
查看次数

如何判断浏览器开发者控制台中是否预加载了资源

我正在使用<link rel="preload" ...>技术使资源加载速度更快,但我没有看到对页面加载时间的可衡量影响。我不确定这是因为资源实际上没有被预加载,还是因为其他原因。

如果我使用 Firefox 进行调试,如何在 Firefox Developer Console 中确定资源是否已预加载?

preload firefox-developer-tools

5
推荐指数
1
解决办法
1905
查看次数

如何向 Firefox 添加自定义网络限制?

这是关于 stackoverflow 的主题,因为它与开发工具有关。

我想要做的是将卫星互联网配置文件加载到 F12 网络节流。类似于 500 毫秒的延迟和 25 Mbit 的最大带宽。

由于广泛使用require.js.

firefox firefox-developer-tools

5
推荐指数
1
解决办法
1769
查看次数

是否可以在浏览器中冻结 DOM 以进行拖动调试?

我正在尝试调试 Angular CDK 拖动问题。该问题仅在拖动时发生,因此如果我可以在拖动时冻结 DOM,那就太好了。然后我想检查 DOM 来查找分析问题。

这在浏览器(例如 Firefox、Chrome)中可行吗?

firefox google-chrome web-inspector google-chrome-devtools firefox-developer-tools

5
推荐指数
1
解决办法
2948
查看次数