你可能不知道的ChromeDevtools的功能

发布网友 发布时间：2024-10-02 01:52

我来回答

共1个回答

热心网友 时间：2024-11-06 02:00

ChromeDevtools是我们每天都在用的工具，它提供了很多调试功能，可以帮助我们更好的开发网页。而我们平时使用的功能只是它全部功能的子集，很多功能并没用到过。

作为高频使用的工具，还是有必要好好掌握的。所以今天就分享几个你可能没注意到的但还挺有用的ChromeDevtools的功能。

在那之前，我们要更新下chrome，因为一些调试功能是在新版加的：

打开“关于GoogleChrome”的页面，chrome就会自动检查更新。

Elements面板点击某个元素，右边选择layout，会看到页面上所有使用了flex布局的元素。

勾选后就会通过overlay展示出如何做的布局，其中网格的部分就是弹性的部分，比较直观。

点击箭头可以跳到对应的元素，点击display:flex右侧的按钮，就会出现flex调试面板，可以直观的修改flex相关样式。

类似的，font也支持了单独的调试面板，点击字体符号就会出现：

这个功能是实验中的特性，需要手动开启下：点击设置，选择Experiments，选中“EnablenewFontEditortoolwithintheStylesPanes”。

Elements中右击某个节点，选择“Capturenodescreenshot”，就会下载该node的截图：

当你想知道某个请求是在哪里发的，可以打开Network面板，在每个网络请求的initiator部分可以看到发请求代码的调用栈，点击可以快速定位到对应代码。

当你想知道某个元素的创建流程，可以通过Elements面板选中某个元素，点击StackTrace，就会展示出元素创建流程的调用栈。这可以帮你理清前端框架的运行流程。

当然，这个功能也是实验性的，需要手动开启下：在settings的expriments功能里，勾选“Capturenodecreationstacks”。

当你想观察某个变化的值的时候，是不是每次都要console.log？其实不用，添加一个liveexpression就可以实时拿到最新的值。

在Preferences里开启ruler，然后在Elements面板选中某个元素，就可以看到尺子、方便定位元素位置或者测量尺寸。

觉得network面板展示的请求信息看起来不方便？那可以把它导出到charles里看。

点击network的“exporthar”按钮，下载har文件，点击文件就可以直接用charles打开。

charles里可以结构化的展示请求的url，而且请求和响应的各种信息展示的也更直观，而且也能持久化。

ChromeDevtools作为我们每天都在用的调试工具，还是有必要好好掌握的，所以我分享了一些大家可能没用过的功能：

flex调试面板：高效直观的调试flex样式

font调试面板：高效直观的调试font样式

ruler：方便测量元素定位和尺寸

请求定位源码：可以快速找到发请求的代码

元素定位到创建的源码：可以快速理清元素是怎么创建出来的，这对于理清前端框架的运行流程很有帮助。

console的动态表达式：监听某个变化的值不用一直console.log了，可以实时看到最新的值，相当于watch

node截图：可以方便的直接拿到某个区域的截图

请求导出到charles查看：charles显示请求信息时，url按照层级结构展示的，请求和相应的信息也更丰富直观，可以更好的分析，也能持久化。

此外，可以经常打开“关于GoogleChrome”页面检查下更新，更早的体验最新的ChromeDevtools的功能。

这几个ChromeDevtools的功能还是挺有用的，可以帮助我们更好的调试。后面我会继续分享一些ChromeDevtools的小功能，一起来把它掌握的更好吧。