开发者工具更新 - Firefox 22 - Mozilla Hacks

这是我们发布的一系列文章中的第一篇，这些文章发布的时间大约是在新版 Firefox 从“Nightly”状态升级成为 Firefox Aurora 的时候。我们认为这是让您了解过去 6 周中所有新开发人员相关功能的最佳时机，我们鼓励您查看Firefox Aurora，如果您还没有查看过的话。

这是什么字体？

首先，在 Inspector 中添加了一个方便的新面板，可以让您检查应用于所选 HTML 节点的任何字体规则，或者您可以选择在单个视图中查看页面上使用的所有字体。

我们认为这对微调跨平台字体差异或测试 Web 字体在应用程序中的工作方式特别有用。

让我们重新绘制

开发者工具箱还具有一个新模式，该模式使用彩色的“闪烁”效果可视化 Firefox 正在重新绘制页面的哪些部分。我录制了一个简短的 1 分钟屏幕录制，让您了解它的工作原理。

在现代 Web 应用程序中，我们往往严重依赖 JS 库和 CSS 动画来使用户体验生动起来，但为了获得所需的体验，了解浏览器为显示页面付出了多少努力非常重要。可视化绘制模式旨在深入了解所有这些。

工具箱在侧边

宽屏笔记本电脑和台式机 LCD 显示器现在已经成为常态，因此我们添加了一种不错的方式，可以将工具箱位置切换到浏览器窗口的右侧，而不是窗口底部或作为单独的窗口。

Jeff 是 Firefox 开发者工具的产品经理，也是偶尔的开放式 Web 黑客，常驻温哥华不列颠哥伦比亚省。

更多 Jeff Griffiths 的文章……

36 条评论

Girish

您好，您可以切换到嵌入式 YouTube 视频的安全版本吗？Nightly 会阻止安全页面中的 http 嵌入。

2013 年 4 月 11 日下午 2:21
1. Robert Nyman [编辑]
  
  已完成！
  
  2013 年 4 月 11 日上午 7:11
Bastian

我希望您可以专注于创建像 Firebug 或 Chrome 那样的加载指标（每个文件都带条形图）、漂亮的 POST/GET 信息面板、一些内置的速度测试，就像 Firebug 或 Chrome 那样。

2013 年 4 月 11 日下午 2:28
1. Christian Sonne
  
  新的网络面板前几天在 nightly 中出现，这里有一个屏幕截图，显示了该页面上的样子 http://i.imgur.com/TgQhTNe.jpg
  
  2013 年 4 月 11 日下午 2:37
2. Victor Porof
  
  查看 Firefox Nightly ;) 几天前就出现了网络监控器。
  
  2013 年 4 月 11 日下午 2:41
3. Panos Astithas
  
  为此，您需要 Firefox Nightly
  
  https://twitter.com/victorporof/status/321250929993203713
  
  2013 年 4 月 11 日下午 3:06
4. Anthony Ricaud
  
  这实际上正在进行中。如果您查看 Firefox 的 Nightly 版本，这个工具就在里面。查看这个屏幕截图 http://bits.potch.me/netpanel.png
  
  2013 年 4 月 11 日下午 3:56
  1. Bastian
    
    谢谢！这就是我一直在等待的。我没有使用 nightly 版本，只是最终发布的 Firefox，但我并不介意多等一会儿。非常棒的功能。我认为 mozilla 开发者工具很快就会超越 firebug ;)（在速度方面，它们已经领先了）
    
    2013 年 4 月 11 日下午 4:37
    1. Mike Ratcliffe
      
      我们努力使工具快速，并防止它们在浏览器启动时加载。这意味着我们只在需要时加载内容。
      
      很高兴您喜欢网络监控器。
      
      2013 年 4 月 11 日上午 6:09
      1. Jeffrey
        
        我很高兴 Firefox Dev Tools 终于获得了网络面板。但我有一些问题。
        
        首先，这些开发人员工具是否可以在 Firefox for Android 上查看？不，我 *不* 谈论远程调试，因为我想在像 ODROID 或 Ouya 这样的设备上使用它们，而无需 PC。
        
        其次，我是否可以像在 Chrome 的网络面板中那样复制链接地址？
        
        2013 年 4 月 11 日上午 6:34
      2. Jeff Griffiths
        
        目前，我们还没有在 Firefox for Android 中实现开发者工具的计划，我们反而专注于将我们的远程开发者工具功能连接到来自桌面上的 Firefox 的 Firefox for Android 和 Firefox OS。
        
        2013 年 4 月 11 日上午 9:34
  2. shaovunet
    
    这就是我找到 http://firefoxnightly.tumblr.com/ 的方式 :-)
    谢谢！
    
    2013 年 4 月 11 日下午 4:41
匿名

请添加一个选项，从网络监控器中过滤图像、样式表和 JavaScript。
有时监控图像请求很有用，但大多数情况下，滚动大量图像请求以找到一个 xhr 很烦人。
此外，一个针对 404、403 和 500 响应的过滤器将非常有用。

2013 年 4 月 11 日下午 2:53
Alexandru

+1 支持更好的网络统计数据。我很乐意从 Firebug 切换过来，这是阻碍我的主要因素之一。

2013 年 4 月 11 日下午 3:15
Joe Developer

命令行去哪里了？

2013 年 4 月 11 日下午 3:56
1. Kate
  
  我在 22 版本上，可以通过 Shift + F2 访问它。
  
  2013 年 4 月 11 日上午 7:31
Mike

@Anthony：这看起来确实很好 :) 期待它！

2013 年 4 月 11 日下午 4:53
Mike Ratcliffe

未提及的一件事是，nightly 现在还包含一个深色主题选项。在我们添加设置面板之前，必须通过以下方式启用它：
1. 打开 about:config
2. 将 devtools.theme 从 light 更改为 dark。

此选项在早期版本中可见，但外观不太好，它仍在开发中。

2013 年 4 月 11 日上午 6:09
1. Jeffrey
  
  等等，深色主题不是默认主题吗？还是您制作了更深的主题？就我个人而言，我更喜欢 Chrome 开发者工具中的那种更亮的主题。当前主题看起来很漂亮，但让我更难集中注意力。
  
  2013 年 4 月 11 日上午 6:24
Kate

您好，最近我一直在尝试使用 firefox 开发者工具，我真的很喜欢您的工作！在使用它的过程中，我一直在记下一些让我感到恼火的事情，或者我认为可以添加或改进的事情。我知道其中一些事情已经被承认，但这可能会有用……

-需要在 Inspector 中悬停在元素上时显示边框模型（边距、填充、高度和宽度等）
-用于编辑 Cookie 和 localStorage 等的选项卡
-有时，当您使用 Ctrl + Shift + I 打开 Inspector 时，窗口会滚动到顶部，这在高页面上很令人沮丧，因为我不得不滚动回底部以检查我想要的节点
-如果未安装 firebug，F12 和 Ctrl + Shift + C 快捷键应该可以工作
-需要能够禁用“如果您离开此页面，您所做的更改将丢失”警告，就像在栏上的下拉菜单中“不再询问我”一样
-需要能够编辑和轻松选择 Inspector 选项卡中的节点内容
-很难向节点添加属性 - 有时，您按 Enter 后它们似乎没有被添加
-测量它样式标尺 - 也许这应该作为插件保留，但没有这个特定插件的键盘快捷键真的很烦人

Inspector 选项卡的右侧面板
-不应该将十六进制颜色更改为 rgb()；应该保留它们为它们原本的样子
-应该显示 :after 和 :before 规则
-需要能够选择和编辑规则
-应该记住框架的宽度，这样我就不必每次打开 Inspector 时都调整它的大小
-需要能够右键单击 url() 并“复制图像 URL”或“在新选项卡中打开图像”，例如

2013 年 4 月 11 日上午 6:27
Alex

干得好，伙计们！

当我使用侧边栏布局时，是否有办法将元素样式放在底部？类似 Firebug 的样式？使用狭窄的垂直窗口工作起来真的很困难。

此外，是否有扩展开发者工具的 API/文档等？

2013 年 4 月 11 日上午 6:28
1. Jeff Griffiths
  
  我们已经开始在 MDN 上实现和记录一些基本 API，如下所示
  
  https://mdn.org.cn/en-US/docs/Tools/DevToolsAPI
  
  这项工作尚处于起步阶段，但您已经可以看到团队中的一些成员正在制作有趣的扩展，例如 JSTerm
  
  http://paulrouget.com/e/fxterminalv3/
  
  2013 年 4 月 11 日下午 1:19
  1. alex
    
    是的，我看到了 JSTerm，这就是我好奇的原因 :P
    
    2013 年 4 月 11 日下午 1:25
Walter

我真的很喜欢您对开发者工具所做的工作。干得好。

唯一让我有点恼火的是检查器中的颜色选择。请使选中节点的背景颜色更加突出。#E5E5E5 不容易看清。

2013 年 4 月 11 日上午 6:32
1. Mike Ratcliffe
  
  我们有一个切换颜色类型的补丁，但我们需要一个上下文菜单机制才能将其发布。我们肯定会添加这个功能。
  
  2013 年 4 月 11 日下午 1:39
Mike Ratcliffe

浅色主题是默认主题，具有深色工具栏等，但面板为浅色。

深色主题可以通过在 about:config 中将 devtools.theme 更改为 dark 来选择。当选择此选项时，大多数面板都是深色的。您可以在此处看到一些差异
https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719063

2013 年 4 月 11 日上午 6:34
Ashutosh Singh

嗨，Jeff，

我一直在想为什么我们的开发者工具只能停靠在窗口的右侧？是直接从 Chrome 复制的吗？因为如果你看看工作流程，把开发者工具停靠在窗口左侧更有意义，因为我们用英语编程，英语是从左到右书写的，所以将代码放在左侧，结果放在右侧更有意义，不是吗？
我不确定为什么 Chrome 会把它放在右侧；有什么逻辑原因吗？还是仅仅是直觉？

2013 年 4 月 11 日上午 9:03
1. Mike Ratcliffe
  
  不是复制，只是尝试提供逻辑选择。
  
  我们的想法是，如果工具栏停靠在左侧，那么当它打开时，它会将整个网页推到右侧，这就是我们只选择停靠在右侧的原因。
  
  您说得很有道理，对于使用 RTL 的网站，提供一个停靠在左侧的选项是有意义的。
  
  2013 年 4 月 11 日下午 11:59
  1. Jeff Griffiths
    
    我同意，我认为右侧是一个良好的开端，但随着我们使工具箱 UI 更加可配置，我们应该考虑提供一个左侧选项。特别是 RTL 用例对我很有吸引力。
    
    2013 年 4 月 11 日下午 1:15
Wilson Bilkovich

这看起来非常有用，感谢您支持宽屏工具栏。

2013 年 4 月 11 日下午 12:37
Rafał

您好，首先：我喜欢您的工具。但是开发者工具的最新更改使它们对我来说使用起来不太方便。有两个更改我认为不是好主意
– 在更新之前，要检查元素，我只需要点击底部的“检查”按钮（波兰语为“Zbadaj”）就可以了。现在我必须打开工具面板，然后点击检查器按钮。
– 在更新之前，样式编辑器停靠在右侧。它比现在大得多。现在要舒适地使用它，您必须分离工具窗口。

如果您不明白我的意思，并且对我的意见感兴趣，请通过电子邮件与我联系。

2013 年 4 月 13 日上午 2:39
1. Rafał
  
  我发现您可以选择检查器以进行检查，只需点击“扳手”按钮即可。此外，习惯工具面板的全屏模式（分离窗口）也很容易。因此，请忽略我之前评论。
  
  2013 年 4 月 13 日上午 6:33
Andrey Petrov

工具箱在侧边很棒！

控制台问题：消息和错误应始终按发生时间排序，而不是按消息类型分组。因此，如果我放置了几个 console.log 消息并收到一个错误，我应该看到
[10:33:45:205] 调试消息 1
[10:33:45:206] 调试消息 2
[10:33:45.208] TypeError: $(…).val(…) 未定义
而不是
[10:33:45.208] TypeError: $(…).val(…) 未定义
[10:33:45:205] 调试消息 1
[10:33:45:206] 调试消息 2

2013 年 4 月 18 日上午 11:10
1. Jeff Griffiths
  
  我们很高兴您喜欢工具箱的改进！
  
  对于 Web 控制台问题，不确定您的用例是什么，请提交一个 bug 报告
  
  https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools:%20Console
  
  2013 年 4 月 19 日上午 8:56
我去

把样式编辑器停靠在右侧的功能恢复回来……页面下方的新的面板布局完全是胡说八道。并且分离到单独窗口的选项
无法弥补这种愚蠢的改变。

2013 年 4 月 24 日下午 5:59
1. Jeff Griffiths
  
  感谢您的反馈 - 如果您有时间，您也可以为这个问题提交一个 bug 报告吗？
  
  https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools:%20Style%20Editor
  
  2013 年 4 月 25 日上午 10:16

本文评论已关闭。

Hacks

开发者工具更新 – Firefox 22

作者：Jeff Griffiths

这是什么字体？

让我们重新绘制

工具箱在侧边

关于 Jeff Griffiths

36 条评论

开发者工具更新 – Firefox 22

作者：Jeff Griffiths

这是什么字体？

让我们重新绘制

工具箱在侧边

关于 Jeff Griffiths

发现 Web 开发的优秀资源

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