ChromeDevtools是我们日常使用的工具，它提供了很多调试功能，可以帮助我们更好的开发网页。我们平时使用的功能只是它所有功能的一个子集，还有很多功能没有使用过。作为一个高频工具，掌握好它还是很有必要的。所以今天我将分享一些您可能没有注意到的ChromeDevtools的有用功能。在此之前，我们需要更新chrome，因为新版本增加了一些调试功能：打开“关于谷歌浏览器”页面，chrome会自动检查更新。FlexdebuggingpanelElementspanel点击一个元素，在右边选择layout，你会看到页面上所有使用flexlayout的元素。勾选后会展示如何通过overlay进行布局，网格部分是弹性部分，比较直观。点击箭头跳转到对应元素，点击display:flex右边的按钮，会出现flex调试面板，可以直观的修改flex相关的样式。与字体调试面板类似，字体也支持单独的调试面板。点击字体符号会出现：该功能是实验中的一个特性，需要手动启用：点击设置，选择实验，选择“在样式面板中启用新的字体编辑器工具”。节点截图在Elements中右击一个节点，选择“Capturenodescreenshot”，会下载该节点的截图：请求定位源码当你想知道某个请求发送到哪里时，可以打开Network面板，在每个网络请求的发起者部分，可以看到请求代码的调用栈，点击可以快速定位到对应的代码。将元素定位到创建的源代码当你想了解一个元素的创建过程时，可以通过Elements面板选择一个元素，点击StackTrace，就会显示该元素创建过程的调用堆栈。这样可以帮助大家理清前端框架的运行流程。当然这个功能也是实验性的，需要手动开启：在settings的expriments功能中勾选“Capturenodecreationstacks”。console的动态表达当你想观察某个变化的值时，是否需要每次都console.log？事实上，你不需要。添加实时表达式以实时获取最新值。ruler在Preferences中打开ruler，然后在Elements面板中选中一个元素，就可以看到这个ruler，方便定位元素的位置或者测量尺寸。请求导出，使用charles查看网络面板显示的请求信息好像不方便？然后就可以导出到charles中查看了。点击网络的“exporthar”按钮下载har文件，点击文件直接用charles打开。在charles中，可以将请求的url结构化的展示出来，更直观的展示请求和响应的各种信息，也可以持久化。综上所述，ChromeDevtools作为我们日常使用的调试工具，还是需要掌握的，所以分享一些大家可能没有用过的功能：flex调试面板：高效直观的调试flex样式字体调试面板：高效直观直观调试字体样式标尺：方便测量元素定位和大小请求定位源码：可以快速找到发送请求的代码元素定位创建的源码：可以快速明确元素是如何创建的，即非常有帮助，对于理清前端框架的运行流程很有帮助。console的动态表达：不需要保留console.log来监控某个变化的值，可以实时看到最新的值，相当于watchnode截图：可以直接获取一个截图一定区域并请求导出给charles查看：charles展示请求信息时，url是按照层级结构展示的，请求和对应的信息也更加丰富直观，可以更好的分析和持久化。此外，你还可以经常打开“关于谷歌浏览器”页面来检查更新，更早体验最新的ChromeDevtools功能。ChromeDevtools的这些功能非常有用，可以帮助我们更好地调试。后面我会继续分享ChromeDevtools的一些小功能，大家一起来更好的掌握吧。
