chrome 开发者工具——前端实用功能总结

1. 查看元素伪类 css 样式

例如我想查看元素触发 hover 时的 css 样式。先选中该元素,而后按下图操做:css

2. 临时增删元素 class

3. document.body.contentEditable="true"

在控制台输入 document.body.contentEditable="true",就能够对页面直接进行编辑。web

4. 查看 placeholder 样式

如今能够查看元素的 placeholder 样式了:chrome

5. 测试页面性能和 SEO

下面是测试报告:网络

参考资料:chrome-devtools

6. Network 显示资源的其余信息

通常 Network 会显示加载资源的详细信息,但它默认只显示部分信息。若是我想查询网页资源是经过 HTTP1.1 仍是 HTTP2 加载的,要怎么作呢?函数

从 GIF 中能够看出,除了 HTTP 协议版本外,还能够查看其余信息,例如 HTTP 请求的方法、域名等等。工具

7. 查看元素绑定事件

鼠标移到 handler 上,可查看具体的函数代码。布局

8. 全局搜索代码

打开开发者工具,点击 Console 标签,按 ESC 弹出:性能

点击左边竖形排列的三个小点,选择 Search测试

点击搜索结果,会跳到具体的源码文件。它会搜索该网页下全部引入的文件。

9. 利用 Performance 检查运行时性能

打开开发者工具,点击 Performance 标签:

点击左上角的 Record 按钮开始记录,而后你模拟正经常使用户使用网页。测试完毕后,点击 Stop

能够看到右上角分别有 FPS、CPU、NET、HEAP:

  1. FPS 对应的是帧率,红色表明帧率低,可能会下降用户体验;绿色表明帧率正常,绿色条越高,FPS 越高。
  2. CPU 部分上有黄色、紫色等色块,它们的释义请看图的左下角。谁的占比高,说明 CPU 主要的时间花在哪里。
  3. HEAP 就是堆内存占用。

NET 最好点击下面的 Network 查看,能够看到具体的加载资源等。

通常根据这些信息就能判断出网页性能问题出在哪。

若是想了解更多,请查看下面的参考资料,须要翻 qiang。或者用搜索引擎搜索 chrome performance,也有不少讲解使用方法的文章。

参考资料

10. Rendering 实时检测网页变化

打开开发者工具,点击 Console 标签,按 ESC 弹出:

点击左边竖形排列的三个小点,选择 Rendering

下面是比较实用的功能:

  1. Paint flashing,实时高亮重绘区域(绿色)。
  2. Layout Shift Regions,实时高亮重排(从新布局)区域(蓝色)。
  3. Layer borders,将合成层用边框标出来(橙色、橄榄色、青色)。
  4. Frame Rendering Stats,显示 GPU 的信息,旧版本还有实时 FPS 显示,但新版本不知道为什么没有(chrome 86)。

11. Application 查看应用信息

从图中看到,在 Application 标签下能够查到本页面不少信息。拿 localStorage 举例,如今我执行代码 localStorage.setItem('token', '123'),而后打开 Application

不出意外,能看到新增的 localStorage 信息。

相关文章
相关标签/搜索