标签: firefox-developer-tools

如何制作Firefox DevTools多线控制台？我知道Shift+ Enter键盘快捷键,它使命令行转到下一行.虽然在Firebug中,我想将我的控制台垂直分离到命令行和结果部分,但我找不到该功能.

当我使用 devtools -> 网络时，我在那里添加一些域过滤器。关闭并重新打开开发工具时如何保留该过滤器？我不想每次打开 devtools -> 网络时都输入它们。

我知道Chrome的检查员有一个选择器来选择与控制台一起使用的框架.Firebug也有类似的命令cd(window.frames[number]).Firefox Devtools中有类似的东西吗？我想frame.window.eval可以工作,但前提是它不是跨域的.

我还想知道是否有一个荧光笔来检查Web控制台命令的结果document.getElementsByClassName(...).但你至少可以通过编程方式改变元素的样式以"看到"它.

在 Firefox Developer Edition 的调试器中，我设置了一个断点来定位 JavaScript 变量的赋值。我希望能够将鼠标悬停在所有先前定义的变量上，以在工具提示中查看它们的值，就像以前版本的 Firefox 一样，但它没有向我显示任何内容，而且似乎没有一个可以添加到侧面的窗口：

关于如何显示变量值有什么想法吗？

在Chrome开发者工具(按F12)中,我可以看到所有服务人员,访问" 应用程序"选项卡,选择" 服务工作者"菜单,选中"全部显示".

我怎么能在Firefox中做到这一点？

我有一个问题是使Firefox开发者工具(Firefox Developer Edition 59.0b7)与Webpack在开发模式(使用webpack-dev-server)中生成的CSS源映射一起工作.

在Firefox开发者工具中,当我检查一下时,它的CSS规则位置是一些块的哈希值,例如blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b而不是真实的文件名(下面的屏幕).这些位置链接也是无效的 - 单击它们不会将我带到源文件.

我有时也会在Firefox Developer Tools控制台中遇到这种错误,我可能会将其连接起来:

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]

在Chrome开发者工具(Chrome 59.0.3071.104)中,一切都显示得非常好 - 我在检查器(下面的屏幕)中看到了原始文件名,并在单击文件名链接后看到了原始的SCSS内容.

有没有办法让Firefox正常运行Webpack的CSS源地图,如Chrome？

我的配置

我在开发者工具选项中启用了启用源地图.devtools.debugger.source-maps-enabled被设置为true在about:config.

以下是我的Webpack配置的相关摘录:

// I tried different devtools but the results in Firefox were the same.
devtool: 'eval-source-map'

(...)

// Chain of loaders for CSS files.
{
    test: /\.(scss|sass|css)$/,
    use: [
        {
            loader: 'style-loader',
            options: { …

如何手动模拟websocket断开连接？我正在尝试测试websocket重新连接逻辑,除了等待浏览器的10分钟websocket超时之外,我无法做到这一点.

我刚刚在 Chrome 中发现了一个有趣的功能，可以显示正在运行的页面/应用程序中未使用代码的哪些部分。

更多详细信息请参见：Chrome devtools 覆盖范围

我无法找到 Firefox 的替代品，有人知道它是否原生存在于浏览器中，或者是否有任何具有相同功能的扩展？

谢谢

我\xe2\x80\x99m是网络开发的新手，并且不\xe2\x80\x99不知道这是否按预期工作，但这对我来说似乎很奇怪。简而言之，禁用触摸甚至模拟会导致我的网页呈现不同的效果（参见附图）。这是由于我的代码、Firefox 开发工具还是其他原因造成的？

谢谢。

Code Here: 代码笔\n\n

如何在 firefox devtools -> 网络 -> 响应中搜索特定文本？当我执行 ctrl+F 时没有任何反应，当我右键单击时，搜索不是选项之一。

相比之下，在 Chrome 开发工具中很容易，只需按 ctrl+F 就会弹出一个搜索菜单。