你希望从你的 DevTools 中获得什么？

编辑注：感谢大家通过我们的 UserVoice 频道分享对 Firefox Devtools 的建设性反馈和想法。该论坛现已关闭。我们已决定将对话转移到 mozilla.dev.developer-tools Google 群组中，那里讨论气氛活跃，Firefox DevTools 团队成员随时可以回答问题并回复评论。我们在那儿见！ (2016 年 3 月)

每个工具都从一个想法开始：“如果我有这个，那么我可以更快、更好或更轻松地做那个。” Firefox Developer Tools 建立在数百个这样的想法之上，其中许多想法来自像您一样的网页开发社区成员。

我们在我们的 UserVoice 论坛中收集这些想法，并使用您的投票来帮助优先考虑我们的工作。

去年 4 月，@hopefulcyborg 请求能够“将 Firefox Developer Tools 连接到 [插入浏览器]。” 到了 11 月，我们发布了 Firefox Developer Edition，其中包含该功能的初步版本：能够从桌面上的 Firefox 调试 Chrome 和 Safari，甚至在移动设备上。我们称之为 Valence。

好想法不必很大，甚至不必特别具有创新性，只要它们能帮助您更有效地实现目标即可。例如，以下所有功能也直接来自我们 UserVoice 论坛的反馈

在 Firefox 39 中，我们将发布 DOM 节点的拖放重新排序功能，在我们的检查器中。
在 Firefox 38 中，我们开始在我们的控制台中显示更有帮助的 CORS 错误以及对 XHR 进行区分。
在 Firefox 37 中，我们更改了我们的检查器颜色，使其更适合具有色觉障碍的用户。
在 Firefox 34 中，我们添加了一个专门用于检查网页存储的面板。
在 Firefox 31 中，我们整合了一个吸管工具到我们的样式检查器中。

The color picker introduced in Firefox 31

在 Firefox 31 中引入的颜色选择器

尽管这些想法的范围相对较小，但它们使 DevTools 变得更有效率、更有帮助，也更容易使用。这是我们的使命：我们为您打造 Firefox，我们希望您知道我们正在倾听。如果您对 Firefox Developer Tools 有什么想法，请在 UserVoice 上提交。如果您没有想法，请投票给现有的想法。正确的人会看到它，它将帮助我们为您构建最好的工具。

如果您想更进一步，并亲自为这些工具做出贡献，我们很乐意帮助人们参与进来。毕竟，Mozilla 是建立在开源理想之上的，即赋予社区合作的能力，以改善我们所有人的互联网。

这些是您的工具。它们如何才能变得更好？

Mozilla 开发者关系工程师，前 Mozilla Persona 开发者。

更多 Dan Callahan 的文章…

27 条评论

micnic

感谢您提供这个很棒的工具！

我想要 DevTools 有更好的性能和稳定性，调试非常缓慢，有时元素面板不显示任何元素，我必须刷新页面才能看到它们。

我希望 DevTools 的网络面板中包含 WebSockets!

2015 年 3 月 26 日下午 8:24
Antoine Turmel

有没有什么针对游戏开发者的功能？
处理、测试游戏手柄，提供处理游戏手柄的代码片段，还有关于画布的内容吗？

2015 年 3 月 26 日下午 8:48
1. Victor
  
  查看我们的画布调试器：https://hacks.mozilla.ac.cn/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
  
  …以及着色器编辑器：https://hacks.mozilla.ac.cn/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/
  
  2015 年 3 月 26 日下午 11:42
Egbert Gerber

像 HttpFox Add-on 那样，一个 URL 过滤框将非常有用！
https://addons.mozilla.org/en-US/firefox/addon/httpfox/

2015 年 3 月 26 日下午 10:02
Darren

能够以慢动作播放 DOM 变化。我希望能够使用 DevTools 降低 DOM 变化的速度，以便我可以看到动画或更改 DOM 的动态代码发生了什么。有时速度太快，难以诊断问题。

能够以“慢动作”查看 DOM 变化对于调试动画等非常有价值。

这样可以避免将内容转储到控制台或尝试设置条件断点。

2015 年 3 月 26 日下午 11:59
1. Tim Nguyen
  
  你可以查看 DOM Profiler：https://github.com/captainbrosset/domprofiler
  
  不适用于 e10s。
  
  2015 年 3 月 27 日下午 10:51
Dimas

对我来说，提供相关的 JS 错误消息是良好 Devtool 的基本功能：https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6711274-relevant-js-console-error-messages

2015 年 3 月 26 日下午 2:16
Florent F.

在脚本实时编辑之后，我的梦想是这个
https://bugzilla.mozilla.org/show_bug.cgi?id=851014

不幸的是，似乎人们不明白这将是多么强大 :(
https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6413889-being-able-to-proxy-resources

Florent

2015 年 3 月 26 日下午 2:55
1. fvsch
  
  据我所知，可以使用 BrowserSync 完成。例如
  https://gist.github.com/fvsch/cf7a7decf639c8372b8c
  
  查看此问题以了解更多上下文
  https://github.com/BrowserSync/browser-sync/issues/514
  
  2015 年 3 月 27 日下午 2:18
2. sroucheray
  
  +10
  
  2015 年 4 月 1 日下午 11:45
Brett Zamir

内存监控，最好与代码调试相关联。

2015 年 3 月 26 日下午 6:45
Surya

在网络监控器中轻松查看 IP 地址的方法。它在旧的 Firebug 中存在，我在新的 DevTools 中非常怀念它！

2015 年 3 月 27 日上午 3:29
1. J. Ryan Stinnett
  
  IP 地址和端口现在显示在 Firefox Nightly 的请求详细信息中：https://cloudup.com/cujoNDzstAk
  
  2015 年 3 月 27 日上午 9:54
  1. Surya
    
    谢谢。我上次检查时，由于某种原因或其他原因，我没有在那里找到它。但是，它仍然比 Firebug 2.x 中显示的方式更方便。
    
    2015 年 3 月 27 日下午 12:48
Žilvinas U.

能够像在 Google Chrome 中一样过滤网络请求。因为如果遇到有数百个请求的页面，Firefox 的网络监控器就变得毫无用处。

2015 年 3 月 27 日下午 12:16
Luke

我真的希望在 beta 版变成“稳定版”之前修复查看源代码的错误 - 这会让开发者感到困惑，他们会想知道为什么更改后的页面看起来与之前的查看源代码窗口一样
https://bugzilla.mozilla.org/show_bug.cgi?id=1146081

希望改进检查器 - 最近，似乎“:hover”检查没有生效，所以你看不到它如何影响子元素，而且有时只是将鼠标悬停在 DevTools 中的某个元素上会导致它突出显示所有具有某些属性的元素，使屏幕变得乱七八糟。

2015 年 3 月 27 日下午 10:15
niels

这里有一些小小的愿望

如果我按下“安装并运行”，那么调试窗口应该保持打开状态。

如果我在有未保存文件的情况下按下“安装并运行”，那么 WebIDE 应该提供保存这些文件的选项。

一个用于“停止应用程序”的键盘快捷键。

如果有 JSHint 集成会很好。

2015 年 3 月 29 日下午 11:26
Scott

AngularJS 支持！

我是那些不幸的人之一，我必须在无法支持 Chrome 的办公室工作，因为过度偏执的安全团队听说 Chrome 中存在一个很久以前就修复的错误，于是从此禁止使用 Chrome，直到世界末日，他们认为“有更好的事情要做”，而不是重新审视它。/挥拳

能够渲染控制台堆栈跟踪，自动将 URL 链接到调试器，甚至包含行号，这将是一个良好的开端。其他增强功能包括 Angular 范围检查器和 scope.$emit/$broadcast 跟踪器，这些也将非常有用。我可以继续说上好几天，但是任何有助于支持 AngularJS 的东西都会有很大帮助！

2015 年 4 月 1 日下午 08:57
1. J. Ryan Stinnett
  
  Firefox 存在 AngularJS DevTools 扩展的实验性移植版本：https://github.com/angular/angularjs-batarang/pull/106
  
  距离上次更新已经有一段时间了，但希望这至少能带来您正在寻找的部分内容。
  
  2015 年 4 月 1 日下午 11:08
David Alan Hjelle

目前，我使用 Chrome 的 DevTools 而不是 Firefox 的最大原因是它们在控制台中对错误等的支持源代码映射。（即抛出的错误的堆栈跟踪将显示原始脚本的文件名和行号，而不是编译或压缩的数字）。有关错误报告和当前进度，请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=670002。

2015 年 4 月 1 日下午 10:12
Don

能够清除 sessionStorage 和 indexDB

2015 年 4 月 1 日下午 11:56
Taiger

原生 Acebug：https://addons.mozilla.org/en-us/firefox/addon/acebug/

2015 年 4 月 1 日下午 12:03
Tom Jensen

如果您能够管理 localStorage 和 sessionStorage，我将不胜感激。目前，它似乎只允许查看数据。

2015 年 4 月 1 日下午 14:21
J W

我希望调试器在使用 30 分钟后仍然能够正常工作。一段时间后，您甚至无法设置断点，并且必须重新启动它。

2015 年 4 月 2 日下午 15:19
JAM

某种可访问性工具会很棒！

2015 年 4 月 7 日上午 08:37
Bundyo

能够复制所有 URL 或在新标签页中打开它们会很棒。

2015 年 4 月 7 日下午 21:12
Egbert Gerber

在“网络”面板中，有时需要仅捕获页面加载时发生的部分请求。那么，如何在网络面板中添加启动/停止或暂停按钮，就像 HttpFox 加载项中的那些按钮一样？
https://addons.mozilla.org/en-US/firefox/addon/httpfox/

2015 年 4 月 14 日上午 07:41

本文的评论已关闭。

Hacks

作者：Dan Callahan

关于 Dan Callahan

27 条评论

你希望从你的 DevTools 中获得什么？

作者：Dan Callahan

关于 Dan Callahan

发现适合网页开发的优秀资源

感谢您！请查看您的收件箱以确认您的订阅。