每个开发者都应该知道的谷歌浏览器隐藏功能

![1_PFJ5UGke-8gze_lcmzX5fw.jpeg][1]

Chrome开发工具是网络开发者中使用最多的工具之一。但它有一些惊人的功能，大多数开发者都不知道。
在这篇文章中，我将讨论每个开发者都应该尝试的五大Chrome DevTools实验性功能。

1.CSS概述 - 样式的每一点和每一片
------------------

> **CSS概述提供了一个网页中使用的所有样式的摘要。**

它包括有关颜色、字体、媒体查询和未使用的声明的详细信息。当你对用户界面进行CSS修改时，这个功能就派上用场了，你不需要再使用第三方工具如颜色选择器。

<center><a href="http://guobacai.com/usr/uploads/2021/10/2232961013.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/2232961013.png"/></a></center>
<center>Chrome开发工具上的CSS概述标签</center>

**如何启用这一功能？**

- 在谷歌浏览器上，点击查看 -> 开发者 -> 开发者工具。
 - 打开设置。
 - 点击 "实验 "标签。
 - 启用CSS概述。
 - 关闭DevTools窗口并再次打开。
 - DevTools中会出现一个新的标签，即CSS Overview。

尽管这个CSS概述面板是一个实验性的功能，但你一旦使用它，就永远不会把它关掉。这个功能非常有用，让你的CSS工作变得更加容易。

2.CSP违规 - 对可能的安全漏洞发出警告
----------------------

> **Chrome DevTools CSP违规断点可以捕捉到与CSP违规有关的可能的异常，并在代码中指出这些异常。**

启用该功能将为您的应用程序增加一个额外的安全层，减少跨站脚本（XSS）等漏洞。

<center><a href="http://guobacai.com/usr/uploads/2021/10/1802671180.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/1802671180.png"/></a></center>
<center>Chrome自动检测可能的CPS违规行为并突出显示错误代码</center>

**如何启用这一功能？**
开发人员可以从 "来源 "选项卡中启用CSP违规断点，如下所述。

- 通过Chrome开发工具转到 "实验 "标签。
 - 勾选 "显示CSP违规 "视图选项。
 - 关闭DevTools窗口并再次打开。
 - 在CSP违规断点下，勾选可信类型违规和违规类型以激活该功能。

Chrome DevTools甚至会显示关于修复它们的额外细节，就在检测到的脆弱代码块前面。

<center><a href="http://guobacai.com/usr/uploads/2021/10/3704549286.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/3704549286.png"/></a></center>
<center>在Chrome开发工具上启用CSP违规断点</center>

3.新的字体编辑器工具--即时翻转字体样式
---------------------

> **你知道吗，你可以即时翻转你网站上的所有字体，并在不触及代码的情况下查看它们的效果？**

Chrome DevTools提供了一个实验性的字体编辑器工具，可以用来改变字体设置。你可以用它来改变字体家族、大小、重量、高度空间，并实时看到变化。

<center><a href="http://guobacai.com/usr/uploads/2021/10/1944801793.gif" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/1944801793.gif"/></a></center>
<center>用Chrome风格窗格改变字体风格</center>

**如何启用这一功能？**

- 通过Chrome DevTools进入实验标签。
 - 在样式窗格中勾选 "启用新字体编辑器工具"。
 - 关闭DevTools窗口并再次打开。
 - 选择HTML元素，其中包括你想改变的字体属性。
 - 然后，你会注意到样式窗格中的字体编辑器图标。

4.双屏模式--为可折叠设备模拟双屏
------------------

> **通过启用双屏模式，你可以在Chrome DevTools模拟器本身的双屏设备上调试你的网络应用。**

在调试surface Duo等双屏设备时，该功能是一个救命稻草。

<center><a href="http://guobacai.com/usr/uploads/2021/10/2984227907.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/2984227907.png"/></a></center>
<center>用Chrome浏览器进行的双屏模拟实验</center>

**如何启用这一功能？**

- 通过Chrome DevTools进入实验标签。
 - 勾选仿真。支持双屏模式。
 - 关闭DevTools窗口并再次打开。
 - 通过DevTools窗口右上角的Toggle Device Toolbar选项，打开你要测试的网页。
 - 将模拟器切换到Surface Duo设备（或其他可用的可折叠设备）。
 - 然后点击 "切换双屏模式"，在双屏模式下模拟你的网页应用程序。

5.完整的可访问性树视图--用更多的可访问性细节检查元素
----------------------------

> **通过Chrome DevTools Accessibility Tree，您可以检查为每个DOM元素创建的可访问性对象。**

这项功能与 "检查元素 "选项卡有点相似。但它允许你深入挖掘，探索你的网络应用的更多可访问性细节。

<center><a href="http://guobacai.com/usr/uploads/2021/10/1028978787.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/1028978787.png"/></a></center>
<center>DevTools Elements面板中的完全可访问性树视图</center>

**如何启用这一功能？**

- 通过Chrome DevTools进入Experiments标签。
 - 勾选元素窗格中的完全可访问性树状视图。
 - 关闭DevTools窗口并再次打开。
 - 通过点击元素面板中显示的新无障碍按钮，将元素视图模式切换为全无障碍树视图。

用独立组件构建，以获得速度和规模
----------------
与其构建单一的应用程序，不如先构建独立的组件，然后将它们组成功能和应用程序。它使开发更快，并帮助团队建立更一致和可扩展的应用程序。
像Bit这样的开放源码软件工具为构建独立组件和合成应用提供了很好的开发者体验。许多团队从构建他们的设计系统或微前端开始，通过独立组件。

<center><a href="http://guobacai.com/usr/uploads/2021/10/1416326074.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})" target="_blank"><img src ="http://guobacai.com/usr/uploads/2021/10/1416326074.png"/></a></center>
<center>一个独立的源控制和共享的 "卡 "组件。右边是=>它的依赖关系图，由Bit自动生成的</center>

总结
--
在这篇文章中，我讨论了5个强大但不常见的Chrome DevTools实验性功能。在这五项功能中，有多少项是你较早知道的？请在下面发表您的想法。
我希望这能帮助您利用Chrome DevTools使您的开发者生活更轻松。谢谢你的阅读!

[1]: http://guobacai.com/usr/uploads/2021/10/2677899610.jpeg
  [2]: http://guobacai.com/usr/uploads/2021/10/2232961013.png
  [3]: http://guobacai.com/usr/uploads/2021/10/1802671180.png
  [4]: http://guobacai.com/usr/uploads/2021/10/3704549286.png
  [5]: http://guobacai.com/usr/uploads/2021/10/1944801793.gif
  [6]: http://guobacai.com/usr/uploads/2021/10/2984227907.png
  [7]: http://guobacai.com/usr/uploads/2021/10/1028978787.png
  [8]: http://guobacai.com/usr/uploads/2021/10/1416326074.png

每个开发者都应该知道的谷歌浏览器隐藏功能

评论已关闭