我每天使用的四个 Firefox 开发工具

我爱火狐，这早已不是什么秘密了。我发现它是一款运行流畅的浏览器，内置了一些非常棒的开发者工具。

我身边大多数人都使用 Chrome（或者最近推出的Brave），并且对其开发工具赞不绝口。我承认它们确实很棒，我甚至用了 Brave 几周，发现它是一款非常棒的浏览器。然而，在家和工作中连续使用了几周后，我又回到了 Firefox。当我启动开发者工具开始工作时，感觉就像回到了家一样。功能方面，Firefox 和 Chrome 几乎完全相同，几乎……。我将简要介绍我认为 Firefox 开发工具中最实用的一些功能。

突出显示

对我来说，Firefox 检查器工具最有用的功能之一是能够突出显示页面上与我选择的任何选择器匹配的元素。在上面的示例 GIF 中，我突出显示了主页上包含类的每个锚标记.wp-block-latest-posts。当我试图找出哪些项目属于某个类名，或者div在检查某个盒子模型正上方或正下方的元素时需要概览该模型时，此功能非常方便。即使您切换到开发工具中的其他选项卡，元素也会保持突出显示。因此，当您切换到字体选项卡或浏览器控制台时，您可以保持元素突出显示。这个小功能有很多用途。

字体

字体选项卡是 Firefox 开发工具中新增的功能。在这里，您可以概览当前页面正在使用的字体，并使用控件快速自定义字体外观——从font-weight到font-size，甚至line-height。

变化

我经常使用检查器工具高亮显示项目，并立即进行 CSS 修改。如果我喜欢修改的效果，我会回溯我的修改，然后在文本编辑器中编写代码。“更改”选项卡方便地汇总了我在检查器工具中所做的所有 CSS 修改，这些修改通常需要很长时间，因此我可以快速了解我到底做了什么。Firefox 甚至支持直接从这里复制粘贴。我再也不需要痛苦地回溯无数个元素，因为我不再记得我到底做了什么才能让某个元素看起来符合预期。

便笺簿

Scratchpad 很酷；它允许你编写一些 JavaScript 代码并在准备好后执行。它还允许你检查 JS 对象。我喜欢 Scratchpad 的地方在于它的工作方式更像一个文本编辑器，而不是浏览器控制台。我可以像在 VS Code 中一样编写 JS 代码，它直到我命令它运行时才会执行，这与控制台不同。有时，由于手指滑到回车键，我写 JavaScript 代码到一半时就会运行控制台。

Firefox 开发工具还有很多很棒的功能我没在这篇文章里介绍，比如实时 CSS 技巧，或者CSS 网格检查器。想进一步了解 Firefox 开发工具的功能，可以跳转到他们的文档，我还建议你关注他们的Twitter，了解最新的开发者工具信息。朋友们，好好享受吧！