你可能不知道的 Chrome 开发者工具功能
Chrome 开发者工具是一套工具，我们这些 Web 开发人员可以每天使用它来构建原型、分析和调试我们的 Javascript、CSS 和 HTML 代码。
在这篇文章中，我将向您介绍一些最有趣但鲜为人知的 Chrome DevTools 功能，您可能会觉得它们很有用。
入门
Ctrl + Shift + I您可以通过按（Windows）或Cmd + Option + I（Mac）键打开浏览器开发者工具。
注意：部分功能仅适用于 Chrome 85 及更高版本。
渲染
默认情况下，此选项卡处于隐藏状态，但您可以按快捷键Cmd/Ctrl + Shift + P并输入“显示渲染”来启用它。此功能为您提供了一系列选项，用于可视化页面的渲染性能。
Paint Flashing此选项可让您可视化屏幕上的某些内容何时被重新绘制。
Layout shift它会显示页面上哪些区域（蓝色高亮显示）在任意时刻发生了位移。当页面上的可见元素的位置或大小发生变化时，就会发生布局位移，从而影响周围内容的位置。
Frame rendering stats实时显示当前页面的每秒帧数和 GPU 使用率。
Scrolling performance issues此选项会突出显示可能减慢页面滚动速度的元素。
Highlight ad frames此选项显示您网站上存在的所有广告框架
CSS 媒体功能
Emulate CSS prefers-color-schemeprefers-color-scheme 允许我们为界面设置系统主题偏好，例如浅色或深色模式。
Emulate CSS prefers-reduced-motionprefers-reduced-motion 可以设置一个偏好，以最大限度地减少网站使用的动画或动态效果。
Emulate vision deficiency这是一个不错的辅助功能选项，可以实时模拟色觉缺陷在您当前页面上的效果。此功能可以帮助我们更好地了解不同类型视力障碍人士如何使用我们的网站。
CSS概述
CSS Overview 是 Chrome 浏览器新版本中一个相当新的实验性工具，它可以快速概览网站使用的颜色和字体，以及未使用的属性、声明，甚至媒体查询的数量。
打开CTRL + SHIFT + P并输入，Show CSS Overview然后点击“捕获概览”。
动画
在动画面板中，您可以访问页面上每个动画帧的时间轴。
它是完全交互式的，您可以前后切换、播放和暂停每一帧。
覆盖范围
“代码覆盖率”选项卡可以帮助我们查找应用程序中未使用的代码块。如果用户需要下载额外内容，那么在 Web 开发中，加载大量 JS/CSS 代码可能会带来问题。
覆盖率显示资源列表，每个资源包含其占用的字节数以及未使用的字节数，您可以打开文件，然后未使用的部分将在左侧以红色突出显示。
网络状况
Network Conditions这个选项卡非常简单，您可能会注意到该选项卡中呈现的一些功能是相同的Network，但它有一个最有用的功能，即 User-Agent。
现在，在开发者工具中，您可以通过禁用“自动选择”来模拟浏览器或设备。禁用后，下拉菜单将启用，您可以选择不同的用户代理，例如 Firefox、Safari 或 Android 上的 Chrome 等。您甚至可以创建自定义用户代理。
注意：此功能仅在当前网站标签页中且开发者工具打开时有效。
搜索
最后，搜索选项卡允许我们通过字符串或正则表达式快速搜索文件。
值得一提的是，虽然这些演示是在 Chrome 浏览器上录制的，但您也可以在任何基于 Chromium 的浏览器中体验这些功能。
希望这些功能对您有所帮助，如果您有任何反馈或建议，请在下方评论区留言。✌
延伸阅读
JavaScript 调试 - Chrome 开发者工具入门
文章来源：https://dev.to/jeferson_sb/devtools-features-you-might-not-know-about-371m