Chrome 开发者工具（DevTools）是众多开发人员选择继续使用 Chrome 浏览器的主要原因之一。
然而，大多数用户仅仅使用了其少数几个功能，对于许多未被广泛宣传的强大特性却一无所知。
现在，让我们一起揭开这些隐藏的宝藏！
每个人都有自己偏好的操作系统、硬件平台、设备类型和外观等。但是，有一点是共通的，那就是他们都使用 Chrome 浏览器，而且几乎只使用 Chrome 浏览器！可以肯定地说，浏览器大战已经结束，Chrome 浏览器已经取得了压倒性的胜利。
Windows 用户通常会使用默认浏览器下载 Chrome，然后就开始使用 Chrome，而忽略了 Windows 提供的所有“建议”。 苹果设备用户（尤其是 MacBook 和大屏幕设备用户）也遵循同样的模式。尽管苹果公司采取了许多强有力的声明和转换策略，但用户和开发人员仍然倾向于避免使用 Safari。
如果设备没有运行 Chrome，那么很有可能它运行的是与 Chrome 兼容的衍生版本，例如Brave或Vivaldi。是的，我承认，从技术上来说，这些浏览器并非基于 Chrome 内核，但这又是另一个话题了。普通用户可能出于意识形态或特殊原因使用这些其他浏览器，但是对于开发人员而言，除了 Chrome 浏览器，其他选择似乎毫无意义。
即使 Chrome 浏览器是内存消耗大户，这一事实也被人们忽略了。原因很简单：它拥有强大的Chrome 开发者工具。
图片来源：官方 Chrome DevTools 文档
如果您正在阅读本文，可以合理地认为您是高级用户、技术爱好者、Web 开发人员，或者符合这些条件中的任何一个。因此，我们不需要详细介绍 DevTools，比如如何打开它，它的各种功能等等。
相反，让我们不浪费时间，直接深入了解 Chrome DevTools 中一些鲜为人知但非常有用的功能。
设计模式
开发人员经常执行的一项任务是检查页面上的元素，然后修改其 HTML 代码，以预览某些内容或测试更改效果。
然而，直接在 DevTools 中编辑 HTML 代码并非始终顺畅。在标签的海洋中艰难导航，努力寻找正确的起始/结束标签，并在编辑文本时处理大量的空白，这些是您可能需要面对的一些问题。如果您是设计师，又不想在混乱的代码中筛选，情况可能会更糟。
这是本网站 (techblik.com) 中某个页面的截图：
深度嵌套的 HTML 结构和令人迷惑的 CSS 类是当今非简单网站的常见特征，这也使得 DevTools 的体验不尽如人意。🤭
不过，DevTools 有一个名为“设计模式”的功能，它可以极大地缓解这种情况。通过使用“设计模式”（这并非官方名称，只是人们根据其激活方式和作用所称呼的，别担心，我们稍后会看到），页面的更改可以可视化和实时呈现，就像编辑电子表格或文本编辑器一样！唯一的问题是，此功能默认情况下未启用，并且激活它可能稍微有点复杂，特别是对于非开发人员而言。
无论如何，操作方法非常简单，您只需按照以下步骤操作即可。根据您的技术成熟程度，这个过程可能非常简单，也可能略有难度。以下是具体操作方法：
- 确保您要编辑的网页已加载，并且您当前正在查看它（即，有问题的选项卡处于活动状态）。
- 按照通常的方式打开 DevTools 面板（使用快捷键、鼠标点击等）。我个人喜欢使用快捷键，在 Mac 上，Opt + Cmd + I 即可。
- 现在，打开 DevTools 后，转到名为“Console”的选项卡。您可能会觉得这非常愚蠢和显而易见，但让我们也考虑一下，（可能有成千上万的）很多人在使用浏览器控制台和 JavaScript 时遇到了困难（无论出于何种原因）。
- 单击光标旁边的第一行，这时会出现一个输入提示符，您可以在此处编写 JavaScript 代码（请参考下面的屏幕截图）。
- 现在，我们需要输入一些 JavaScript 代码。别担心，您需要编写/输入的内容非常简短且易于理解：document.designMode = “on”。您也可以复制并粘贴此页面上的代码（如果这样做，请确保格式未被复制，我们只需要纯文本）或者，如果您有信心，也可以直接输入。
- 点击 Enter/Return 键。
“就这些？！”
是的，就是这样！
现在，您可以像编辑文档一样自由编辑页面。请查看这个演示视频，其中我使用设计模式实时编辑 Spotify 网站：
尽管设计模式功能非常强大，但它并非万能。例如，您不能轻松地复制和粘贴按钮，或者改变它们的外观。与理想的可视化网页编辑器相比，它的功能确实有限。但是，它确实解决了需要以可视方式即时更改内容的用例。
话虽如此，说 Chrome 团队正在测试此功能的受欢迎程度也并非不合理。如果它获得积极的反馈和强大的用例，那么我们有理由期待在不久的将来推出更强大的编辑功能！🤞🏻🤞🏻
模拟网络状况
Chrome DevTools 中的 “Network” 选项卡可能是使用最频繁的选项卡（当然，我没有确凿的数据，但作为一名 Web 开发人员，我可能 20%-30% 的时间使用 “Console” 选项卡，其余时间使用 “Network” 选项卡）。它提供了关于页面发出的请求、它们的类型、元数据/标头、状态、资源（图像、样式表等）下载进度、加载时间等各种信息。凭借如此强大的实用性，难怪 “Network” 选项卡是最常用的。
然而，我们讨论的功能很容易被忽略；您可能没有注意到一个不起眼的下拉菜单，上面写着 “在线”。
如果单击此选项，您将看到一个下拉菜单，其中包含各种选项，允许您限制网络速度：快速 3G、慢速 3G、离线等。虽然此选项可能有多种用例，但最常见的用法是测试网站在慢速网络上的性能或 Web 应用程序在离线时的行为（假设添加了这样的功能）。
让我们尝试一下。我将网络设置为 “Slow 3G”，然后重新加载与上一张屏幕截图相同的页面。在我这样做之前，请注意前面的屏幕截图，在我当前的网络连接（40 Mbps 宽带）下，大多数资源的下载时间都在 100 毫秒以内。
现在，是时候看看慢速 3G 对它的影响了。
差别太大了！
请注意，资源的加载时间现在在 5-10 秒范围内。此外，网站在 17.25 秒内完成加载！是的，我知道您在想什么，但您必须考虑到在慢速 3G 网络上，任何现代网站都需要几秒钟才能加载。是否要优化网站在慢速网络上的快速加载是另一回事，但总而言之，这必须是一个商业决策，收益必须证明付出的努力是合理的。
在上面的屏幕截图中，请注意 “Network” 选项卡上的警告图标。这是 Chrome 提醒您进行了一些非默认的、持久的更改的方式，除非您知道自己在做什么，否则应该重置这些更改。
交互式颜色选择器
在 DevTools 中检查 DOM 元素是我们几乎每天都要做的事情。我们也很熟悉旁边显示的 CSS 详细信息部分，我们知道可以编辑它并立即看到结果。
其中隐藏的一个小便利之处是，如果您单击某个 CSS 颜色属性，会弹出一个熟悉的颜色选择器界面！
请注意，它不是一个简单的、基本的颜色选择器。它允许您控制透明度，更改正在使用的颜色系统，直接从页面选择颜色等等。
因此，下次您尝试网站的强调色时，例如，您无需计算或猜测您心中想要的颜色的正确值！事实上，很多人喜欢直接在浏览器中设计网站；对他们来说，这些功能简直就是天赐之物！🙂
监控页面元素上的事件
我们经常遇到这种情况：希望知道我们感兴趣的特定元素上发生了什么。当在一个大型代码库中使用 jQuery 时尤其如此，无论代码是你自己写的还是别人的；事件处理程序和逻辑遍布各处，跟踪错误可能是一场噩梦。
幸运的是，Chrome 开发者工具为此提供了一个出色的功能。它将观察您指定的元素，并将事件记录到控制台。但有一个缺点：此功能没有基于 CSS 类名来选择元素的功能。因此，jQuery 的 $(“#email”) 方法在这里不可用。🙂
话虽如此，让我们看看如何让它发挥作用。我们首先使用 DevTools 检查器执行一个简单的 “检查元素” 操作。是的，就是我们每天都在使用的检查工具。
在下面的屏幕截图中，我使用检查器工具来突出显示文本输入框。我所说的 “突出显示” 并不是指页面上的元素被突出显示（正如您所见，它没有）；相反，在文本输入框上点击了检查器光标，DevTools 中相应的 HTML 代码被突出显示。
这样做的目的是为了监控当前检查的元素中的事件。这使得该元素可以作为名为 $0 的特殊 JavaScript 变量进行访问。接下来，我需要确保没有不小心点击浏览器窗口的其他位置（特别是 HTML 代码部分），我点击 “Console” 选项卡，并为文本输入框添加一个事件侦听器。为此，我只需要一行代码：monitorEvents($0, ‘mouse’)。“mouse” 部分告诉 Chrome 我只对监控基于鼠标的事件感兴趣。
只要我按下 Enter/Return，监控就会被激活。如果我现在将鼠标悬停在文本输入框上或者点击它，这些事件将作为 JavaScript 对象记录到控制台：
正如您在屏幕截图中所见，当我点击该元素，输入我的名字，然后将鼠标移开时，捕获了几种类型的鼠标事件（输入事件是键盘事件，未被记录）。事件本身就是 JavaScript 对象，从屏幕截图中可以清楚地看到；每个事件对象都包含大量信息。例如，我展开了 “click” 事件对象，属性的数量多到无法在一张屏幕截图中显示！
我强烈建议您立即尝试此功能，因为它肯定会为您的下一个项目节省很多麻烦！
网站性能报告
如今，网站性能决定了一个企业/网站的成败。即使性能的微小提升也会转化为巨大的 SEO 收益和用户满意度。但是，您如何知道您网站的哪些部分需要关注，哪些部分已经很好？
是否需要聘请专家团队，然后耐心等待几天？
好吧，在某些情况下确实需要这样做，但幸运的是，Chrome DevTools 已经为我们其他人提供了帮助。在最新版本的 Chrome（2020 年末）中，您会在 DevTools 中找到一个名为 “Lighthouse” 的选项卡。几个月前，它被称为 “Audits”，令人困惑的是，这就是您在撰写本文时在官方文档中找到的名称。不管怎样，重点是 Lighthouse 曾经是一个免费检查网站性能的工具，但后来谷歌将其下架了（没有给出原因）。值得庆幸的是，同样强大的功能后来又出现在 DevTools 中。
要生成性能报告，您只需在加载您感兴趣的页面后单击一个按钮：
正如您在屏幕截图右侧看到的那样，有几个选项可以控制您想要的信息量（当然还有您想要测试的内容）。一旦您对设置感到满意，请单击那个蓝色的大按钮，然后坐下来放松一下。几秒钟后，您将获得一份类似下面的有价值的报告：
您在上面的屏幕截图中看到的数字显示了每个类别的总分。渐进式 Web 应用程序（PWA）的类别显示为灰色，可能是因为该网站没有 PWA 功能。此外，正如您可以从屏幕截图（最右侧）中的滚动条大小看出的那样，这是一份很长的报告。
以下是性能部分的一部分：
我不会说 Lighthouse 及其建议是网站性能的灵丹妙药，但它们非常有用；这是因为网站所有者和开发人员很少知道存在哪些问题，以及如何准确地解决这些问题。
坦率地说，作为一名 Web 开发人员，我甚至感到有点茫然，因为性能和测试往往是某种专业领域。因此，Lighthouse 是一种鲜为人知且未被充分利用的工具，现在是 Chrome DevTools 的一部分，对企业主和开发人员/系统管理员等都具有巨大的价值。
代码编辑能力
DevTools 中的 “Sources” 选项卡允许我们访问网站加载的各种文件。它还具有代码编辑、保存代码片段等功能。这对于 Web 开发人员来说应该不足为奇。然而，DevTools 也内置了一些便利的功能，可以使习惯了他们最喜欢的代码 IDE 的开发人员的生活更加轻松。
DevTools 使用一些众所周知的键盘快捷键，可以节省您的时间，并最大程度地减少代码处理的麻烦。例如，Ctrl + D（或 Mac 上的 Cmd + D）可用于突出显示多次出现的单词。类似地，按住 Ctrl（或 Mac 上的 Cmd）并点击代码中的多个位置，可以为您提供多个光标。观看以下视频可以更好地理解：
如果您觉得这很酷，请务必深入研究官方文档，以充分利用 DevTools 提供的所有代码编辑功能。
控制 DOM 元素状态
有时，我们在测试或调试某些东西，但我们想要的行为仅在特定元素状态下可用。根据元素的状态，您可能会度过一段艰难的时光；对我来说，通常是 “悬停” 状态，因为我记得曾经浪费了无数时间来尝试为悬停动作计时，或者添加额外的临时 CSS 等。
幸运的是，Chrome DevTools 提供了一种简单的方法来更改所检查元素的状态。更重要的是，如果我们右键单击元素（在 “Elements” 选项卡中），更改状态的选项就在那里。但是，考虑到功能的数量和一天工作的压力，很容易忽略这一点：
是的，就是这么简单！
现在，您无需在代码中添加条件测试逻辑，编写额外的 CSS，或者在观察处于不同状态的元素时跳过其他一些步骤。
工具面板
最后但并非最不重要的是，是此列表中的 “工具” 面板。这是另一个非常有用的功能，它隐藏得很好，只有使用键盘快捷键才能看到。顾名思义，工具面板不是一个单一的工具，而是一个仪表盘，其中几乎所有 DevTool 的功能都可用。由于函数太多，顶部有一个搜索栏，可以提供整个 DevTools 的功能。
要激活工具面板，请确保您在 DevTools 面板中，然后按 Ctrl + Shift + P（或 Mac 用户使用 Cmd + Shift + P）：
工具面板充满了功能和惊喜。例如，您知道可以直接从 DevTools 截取屏幕截图吗？
我打赌您不知道，因为您必须启动 “工具” 面板，并在搜索栏中键入 “screenshot” 才能发现：
您还会注意到一些用于截取屏幕截图的选项，包括一个用于选定 DOM 节点的选项！ 请深入探索 “工具” 面板，我保证您不会失望的！
如果您需要远程截取任何网页的屏幕截图，请查看 techblik.com 提供的屏幕截图工具。
结论
Chrome 浏览器本身功能丰富，但它真正出彩的地方是 DevTools 工具。正如我们在这篇文章中所看到的，有很多隐藏的功能——以及其他隐藏在人们眼皮底下的功能——大多数用户都不知道。为什么隐藏这些功能？
我猜想，其中一些功能是非常实验性的（例如设计模式），Chrome 开发人员希望让日常用户很难找到这些功能。对于其余的许多功能，我认为这只是信息过载的情况：如果有 120 个功能，其中一些功能还有子功能等等，那么几乎不可能为此类场景设计正确的用户界面。此外，谷歌历来在其产品的用户体验方面做得并不好，所以情况就是这样。🤷🏻♂️
无论如何，我希望您发现其中一些功能很有用。但更重要的是，我希望这篇文章能让您了解哪里隐藏着什么，以便下次您想要探索或搜索特定内容时，您知道在哪里“深入挖掘”。😆