Chrome Devtools是我们每天使用的工具。它提供了许多调试功能，以帮助我们更好地开发网页。我们通常使用的功能只是其所有功能的一个子集，并且尚未使用许多功能。
作为高频使用的工具，仍然有必要掌握它。因此，今天我分享了Chrome DevTools的功能，您可能不会注意到，但很有用。
在此之前，我们必须更新Chrome，因为新版本中添加了一些调试功能：
打开页面“关于Google Chrome”，Chrome将自动检查和更新。
元素面板单击特定元素，然后在右侧选择布局，以使用页面上的Flex布局查看所有元素。
检查后，将通过覆盖显示如何进行操作的布局。网格的一部分是弹性部分，更直观。
单击箭头跳到相应的元素，单击显示右侧的按钮：FLEX，FLEX调试面板将出现，可以直观地修改flex相关样式。
同样，字体还支持一个单独的调试面板。单击字体符号将显示：
此功能是实验的特征。您需要手动打开它：单击设置，选择实验，选择“启用样式窗格中的新字体编辑器工具”。
右 - 单击元素中的某个节点，然后选择“捕获节点screnshot”，您将下载节点的屏幕截图：
当您想知道要发送请求的地方时，您可以打开网络面板。每个网络请求的启动器部分可以看到请求代码的调用堆栈。单击以快速定位相应的代码。
当您想知道某个元素的创建过程时，可以通过元素面板选择某个元素，然后单击“堆栈跟踪”以显示元素创建过程的呼叫堆栈。这可以帮助您阐明正面的运行过程 -最终框架。
当然，此功能也是实验性的，您需要手动打开它：在设置的删除功能中，选择“捕获节点创建堆栈”。
当您想观察更改的价值时，您是否必须每次都遵守。
在首选项中打开Raler，然后在“元素”面板上选择某个元素以查看标尺，方便定位元件位置或测量大小。
您是否认为网络面板显示的请求信息看起来不便？它可以导出到查尔斯。
单击网络的“导出HAR”按钮，下载HAR文件，然后单击Charles直接打开文件。
查尔斯可以显示请求结构化的URL，并且请求的各种信息显示和响应更加直观和持久。
Chrome DevTools作为我们每天使用的调试工具，仍然是掌握它的必要条件，因此我共享一些您可能不会使用的功能：
此外，您通常可以打开“关于Google Chrome”的“关于Google Chrome”页面检查和更新，并在较早之前体验最新的Chrome Devtools。
这些Chrome DevTools的功能仍然非常有用，这可以帮助我们更好地调试。我将继续共享一些小型Chrome DevTools的功能，让我们一起将其掌握。