开发者工具拾遗

概述

之前写过你不知道的console调试，再加上在工作中开发者工具用得不少，本来以为懂得很多了，但是看了Chrome开发者工具系列之后还是觉得有一些我不知道的功能还挺方便的，下面记录下来，供以后开发时参考，相信对其他人也有用。

Elements

我们经常在开发者工具的Elements面板去查看DOM和styles，但是它还有下面2个有用的功能：

1. 激发active, hover等状态，方法是鼠标移动到某个DOM上面点右键，然后就有active, hover等选项了。以前我都是在style里面去改的，现在发现在DOM里面改真的挺方便的。
2. break on，即断点功能。可以在DOM里面给标签设置各种状态的断点，然后如果在运行的时候有js改动这些状态会自动跳转到js。方法是鼠标移动到某个DOM上面点右键，然后最下面就是break on选项了。以前我都是找标签绑定的事件然后找js的。

Network

有时候我们会遇到更新后加载的页面还是原来的页面的情况，并且刷新 + 清除缓存都不管用，原因是储存在cache里面去了，这个时候可以把开发者工具的Network面板的Disable cache勾选，这样就不会从cache里面加载数据了。

还有些时候，我们需要测试在低网速的情况下网页的加载情况，这个时候可以点击No throttling，会出现一个下拉框，可以选择以各种网速来加载网页。

Resources

有时候我们可以在开发者工具的Resources面板查看网页的源码！(特别是如果网页是静态网页并且存放在SVN上面的时候，就一定能看到源码)

Profiles

开发者工具的Profiles面板有四个选项：

1. Record Javascript CPU Profile(js函数的耗时情况)
2. Take Heap Snapshot（为当前界面拍一个内存快照，显示内存情况）
3. Record Allocation Timeline（内存分配的时间线）
4. Record Allocation Profile（js函数的内存占用情况）

目前可以利用这个面板的第三个选项查看操作过程中，对象的创建和销毁过程。（特别是react组件的创建和销毁过程）

Audits

开发者工具的Audits面板可以给你的网页优化提供建议！！！分为下面2种：

1. 网络优化建议。(network utilization)
2. 界面性能优化建议。(web page performance)

Console

我们经常使用console面板，但是在console面板按esc会出现如下有意思的面板：

1. Rendering，勾选里面的Paint Flaching可以查看你网页的重绘情况！！！！
2. Animations，可以查看你网页的动画情况！！！

其它的貌似没什么使用价值，就不了解了。

开发者工具拾遗

原文：https://www.cnblogs.com/yangzhou33/p/9029179.html