Firefox 开发者工具可以做到这一点吗？

我已经很久没发关于“我X能做到”的帖子了。而且，Firefox 开发者工具也一天比一天好，所以我觉得是时候为它写一篇了，因为它值得。

那么，你准备好了吗？😎

如何打开

您可以从菜单中选择“工具” > “Web 开发者” > “切换工具”来打开Firefox 开发者工具，或者在 Windows 和 Linux 上使用键盘快捷键+ +或，在 macOS 上使用+ + 。CtrlShiftIF12CmdOptI

页面检查器

页面检查器（相当于 Chrome DevTools 检查元素）中有很多有用的功能，但其中有几个是我最常用的：

搜索 CSS 类

您可以使用检查器选项卡正下方的搜索框来搜索元素、类和其他选择器。但我主要用它来搜索具有特定类的元素。如果您有多个元素看起来相似但具有特定的类，或者由于类被隐藏而无法看到，那么这个功能非常有用。

过滤器样式

下面的部分有一个用于筛选样式的框，可以用来轻松找到您可能想要的特定样式。它的优点在于，它会高亮显示选择器并展开属性，让您轻松找到所需的内容。

查看不同格式的颜色代码

我最喜欢的一个是这块小小的金块。有了它，你可以轻松地Shift+click并查看所有不同类型的颜色表示，包括name、hex、rgb和hsl。当然，并非所有颜色都有名称，在某些情况下，你只会看到其他颜色。

很酷吧？

Web 控制台

谁不喜欢浏览器开发者工具里的控制台呢？它可以用来记录日志、计算、求值等等。

控制台消息样式

你可以通过为控制台中的消息应用 CSS 样式来获得更美观的效果。例如，当你有大量日志，并且想要用不同的样式突出显示特定部分时，这一点就显得尤为重要。

请注意，您已经拥有console.info、console.warn和console.error可供使用。因此，这将比您使用它们所能获得的更高。

在命令历史记录中搜索

如果你输入了许多命令，并想在这些命令之间进行搜索，这个功能会很有帮助。只需输入你要查找的全部或部分命令，它就会显示所有与该短语匹配的命令。

按下F9Windows 上的或CTRL+ 键R打开搜索框。然后输入关键词，如果右侧的计数显示有结果，您可以按下Windows 上的F9和SHIFT+ 键在搜索结果之间切换。对于 Mac 用户，请使用+和+ 键F9在搜索结果之间切换。CTRLRCTRLS

PS：我只是使用箭头键，因为F9它在我的录音软件上映射到暂停和播放，而我懒得改变它😁。

整个页面的截图

要获取整个页面、视口或某个元素的屏幕截图，您只需输入:screenshot并传递所需的参数即可。组合如下：

:screenshot                           //the visible part of the page
:screenshot --fullpage                // whole page even invisible parts
:screenshot --selector .css-selector  // only one element (including its children)

在文档中了解有关可以传递给它的其他参数的更多信息。

当然，您也可以使用上图中控制台左侧的照片图标来截取屏幕截图。

JavaScript 调试器

除了上述两个部分之外，与任何其他开发人员工具一样，还有一个调试器部分，您可以在其中查看源代码以了解为什么某些事情会发生不该发生的情况，或者只是简单地测试某些事情。

漂亮打印缩小代码

要美化已压缩的文件，请点击{}源窗格中的此图标：。调试器将格式化源代码并将其显示为一个新文件，其名称类似于：“{ } [original-name]”。

搜索文件/功能

要搜索特定文件，只需按下CTRL+键P（Mac 上为CMD+键P）。显示屏会显示与搜索词匹配的文件列表，您可以选择所需的文件。按下即可Enter打开文件。

XHR（XMLHttpRequest）断点

有时你需要弄清楚访问/发送请求到特定 URL 时会发生什么。一旦设置并命中该 URL，执行就会停止，以便你可以看到此时应用程序的状态。

只需单击+XHR 断点部分，或者如果您想为所有 URL 启用它，只需勾选“在任何 URL 上暂停”复选框。

性能工具

我通常会在性能工具上花费大部分时间。您可能知道，我一直在积极致力于网络性能研究，并且还发表了一系列关于其一些重要方面的文章。

不过，为了保持文章简短（请原谅我的双关语😁），我只会介绍我经常使用的两个。其余的，你可以在官方文档中了解更多。

瀑布标签

在看到这些标签页之前，你应该先点击 ⏱ 图标来记录页面的加载情况。完成后，你将默认看到瀑布标签页。轴上显示的X是时间。

如您所见，浏览器执行的各种操作（例如运行 JavaScript、更新布局、垃圾回收等等）都显示在视图中。您可以在此视图中了解应用程序的加载性能，以及哪些类型的操作耗时最长。

好处是每个类别的颜色不同，因此您可以轻松地在每个类别中找到它们。

有关每种颜色所代表的含义的完整参考，请参阅文档中的标记表。

调用树

您可以在此视图中看到所有已调用函数的调用树，这些函数从上到下依次排列。此视图的主要目的是显示哪个函数的执行时间最长。通过分析这些调用，您可以找到代码中的瓶颈。

您可以在结果表中看到，每一行代表一个函数，并且按照函数执行期间采集的样本数量从高到低进行排序。摘自docos：

总时间是根据所选录音部分所涵盖的总时间，将该数字转换为毫秒。这些数字应大致与样本数量相同。

总成本是该数字占所选录音部分中样本总数的百分比。

自身时间是指该特定函数（不包括其子函数）所花费的时间。这来自捕获的堆栈，其中该函数是最叶函数。

自身成本是根据自身时间占所选录音部分中样本总数的百分比计算得出的。

各种各样的

还有很多其他内容超出了一篇文章的讨论范围。但我想指出一些你可以使用 Firefox 开发者工具完成的其他实用功能。

可访问性检查器

辅助功能检查器允许您通过辅助功能树访问当前页面上向辅助技术公开的重要信息，从而让您检查缺少什么或需要改进什么。

左侧有一个节点树，表示当前页面无障碍树中的所有项目。每个项目都列出了两个属性：

Role — 该项目在页面上的角色（例如，按钮、页脚、文本页）。这可以是浏览器提供的默认角色，也可以是通过WAI-ARIArole 属性赋予的角色。
名称— 此项目在页面上的名称。名称取决于元素；例如，大多数文本元素的名称就是它们的 textContent，而表单元素的名称则是其关联的的内容<label>。

这里很酷的一点是，你可以将整棵树打印到JSON。这将帮助你解析此结构，查找任何特定的不合规项。例如，有人创建了一个 ML 模型来验证可访问性，而这个 JSON 非常适合为这些模型准备数据。