Chrome调试

Chrome调试

八月 15, 2021

Chrome调试

写在前面

Chrome DevTools是一个直接内置在Google Chrome浏览器中的Web开发工具，官方文档中面列举了所有的支持的调试工具以及详细的调试方法，同时官方建议开启访客模式，避免插件产生的干扰，同时官方文档基于版本与我的Chrome版本不同，以下的内容都为我实测的结果

Chrome版本

  1. ubuntu20.04tls 91.0.4472.164 (正式版本) （64 位）
  2. windows10 92.0.4515.131 (正式版本) （64 位） (cohort: 92_win_131)

参考资料

  1. https://developer.chrome.com/docs/devtools/
  2. https://cloud.tencent.com/developer/article/1503476
  3. https://zhuanlan.zhihu.com/p/143358849
  4. [https://www.cnblogs.com/ranyonsue/p/9342839.html
  5. https://segmentfault.com/a/1190000016811577

js代码

设置断点

有两种方法可以给代码添加断点

方法1：在 Source 内容区设置

  1. 找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。
  2. 刷新浏览器，当页面代码运行到断点处便会暂停执行。

方法2：在 js 文件中设置

（1）我们在 js 源文件中需要执行断点操作的代码前加上 debugger。
（2）刷新浏览器，当页面代码运行到断点处会暂停执行

性能

性能测试

在Lighthouse点击Generate report即可生成报告，报告中含有各项性能的指标，以及相关的问题，可以为我们提供了一些可以优化的方向

选项

  • Performance
    • 表现
  • Community Plugins
    • 社区插件
  • Device
    • 选择手机或是桌面平台

性能调试

在performance选项卡中，点击record就会开始记录当前页面的性能，点击stop就会停止记录，这里的记录时间我实测不建议过长（本人电脑性能不佳，录制大约30s会有明显卡顿，期间多次失去响应）

可选的选项

点击Capture Settings会出现更多选项

  • Screenshots
    • 截图：操作页面的实时截图
  • Memory
    • 内存消耗记录：勾选后可以看到各种内存消耗曲线
  • Web Vitals
    • 性能体验和质量指标
  • Disable javaScript samples
    • 关闭javaScript样本：减少在手机运行时的开销，模拟手机运行时勾选
  • Network
    • 网络模拟：可以模拟在3G / 4G等网络条件下运行页面
  • Enable advanced paint instrumentation(slow)
    • 记录渲染事件的细节：选择frames中的一块，此时区域会增加Layers
  • CPU
    • CPU限制：主要为了模拟低CPU下运行性能

从上到下的三个区域

Overview

鼠标悬停时会显示当前页面的截图
选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移
可以放大显示一部分记录，以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后，火焰图会自动缩放以匹配同一部分

Overview 窗格从上到下：

  1. FPS:
    每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，这就表示页面出现卡顿，这时会非常影响用户体验，可以针对fps过低的时间段查找问题
  2. CPU
    CPU 资源。此面积图指示消耗 CPU 资源的事件类型，这里的颜色与最下方的总结区域相对应，如果长时间同一种情况占用大量的资源，可以先从占用大量资源的情况问题找起
  3. NET
    每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

火焰图

在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件
在火焰图中选择事件时，Details 窗格会显示与事件相关的其他信息
这里我们优先关注右上角红色三角形的函数，点击下方会出现详细事件，Function会有代码出现的位置

总结区域

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间

Loading事件
事件 描述
Parse HTML 浏览器执行HTML解析
Finish Loading 网络请求完毕事件
Receive Data 请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Receive Response 响应头报文到达时触发
Send Request 发送网络请求时触发
Scripting事件
事件 描述
Animation Frame Fired 一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame 取消一个动画帧时触发
GC Event 垃圾回收时触发
DOMContentLoaded 当页面中的DOM内容加载并解析完毕时触发
Evaluate Script A script was evaluated.
Event js事件
Function Call 只有当浏览器进入到js引擎中时触发
Install Timer 创建计时器（调用setTimeout()和setInterval()）时触发
Request Animation Frame A requestAnimationFrame() call scheduled a new frame
Remove Timer 当清除一个计时器时触发
Time 调用console.time()触发
Time End 调用console.timeEnd()触发
Timer Fired 定时器激活回调后触发
XHR Ready State Change 当一个异步请求为就绪状态后触发
XHR Load 当一个异步请求完成加载后触发
Rendering事件
事件 描述
Invalidate layout 当DOM更改导致页面布局失效时触发
Layout 页面布局计算执行时触发
Recalculate style Chrome重新计算元素样式时触发
Scroll 内嵌的视窗滚动时触发
Painting事件
事件 描述
Composite Layers Chrome的渲染引擎完成图片层合并时触发
Image Decode 一个图片资源完成解码后触发
Image Resize 一个图片被修改尺寸后触发
Paint 合并后的层被绘制到对应显示区域后触发

html与css

伪类

由于部分伪类需要鼠标才能显现，很多时候并不是非常方便，这是我们可以借助Chrome提供的force state功能，在Elements中找到需要调试的节点，或是使用快捷键ctrl + shift + c的快捷键选中需要调试的节点

  1. active 激活(鼠标按住时)
  2. hover 鼠标悬停
  3. focus 键盘事件或输入的元素激活时
  4. visited 已访问链接
  5. focus-within 元素本身及其子元素，同focus
  6. focus-visible 当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时

其他调试

手机远程调试

Chrome桌面版固然可以模仿手机浏览，但这并不实际手机，如果我们需要在手机上进行调试，可以使用chrome的远程调试功能，首先手机需要开启USB 调试选项并用且连接电脑，开启调试模式，当然手机也需要开启Chrome，同时手机和电脑都需要能访问谷歌（实测下来如此）

用桌面端的chome访问chrome://inspect/#devices，此时可以在Remote Target看到手机型号，通过open可以打开网站，点击inspect即可开启调试，此时电脑就可以看到手机上的画面与各项输出

搜索

F12开启开发者模式，通过快捷键Ctrl+Shift+P即可开启搜索

fps

搜索fps即可查看当前网页的fps情况

截图

搜索screenshot

  • Capture area screenshot

    截取鼠标选取的位置

  • Capture full size screenshot

    截取所有网页的截图

  • Capture node screenshot

    截取当前节点的截图

  • Capture screenshot

    截取当前Chrome显示的截图

chrome插件

react

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

vue

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg