Chrome调试工具介绍
文章目录
1.简介
2. Elements
3. Console
4. Sources
5. Network
6. performances
7. Memory内存检测工具
8. Application
9. Security
10. Lighthouse
1. 简介
Chrome桌面级浏览器，占市场份额的70%左右，它的开发者工具，是每个前端开发工程师必学工具。
主要功能如下
- 观察/改变 DOM
- 观察/改变 页面样式
- 调试JS
- 在控制台（console）查看日志/跑脚本
- 进行网页性能评估
- 监听网络活动
...
如何唤起工具
当我们按下键盘的F12键后，能看到调试工具中有默认的一些常用调试工具。如下图所示
image.png
功能划分
- Elements 元素面板
- Console 控制台面板
- Network 网络面板
- Sources 源代码面板
- Performance 性能面板
- Memory 内存面板
- Application 应用面板
- Security 安全面板
- Lighthouse 性能评估工具
下面我们就常用功能面板来介绍下开发者工具的功能和用法:
2. Elements
elements元素面板，如下图所示，分为左侧HTML代码部分，和右侧CSS代码部分。
在左侧，我们能清晰的看到HTML代码的DOM结构，当我们选中某个节点的时候，按下右键会显示出功能操作面板。
HTML代码区
image.png
CSS代码区
styles
css编辑面板，可以通过点击样式属性直接修改，页面会对应变化
image.png
computed
CSS盒子原型，能看到BOX的大小边界，以及各种属性，不可编辑
image.png
layout
只能用来看flex布局和grid布局的盒子
image.png
Event Listeners
事件监听器，能看到选中的DOM节点上，有哪些事件监听
image.png
3. Console
console控制台面板，主要分为三大部分
- 顶部 工具栏
- 左侧 日志类型
-
右侧 日志的显示/运行区域
image.png
工具栏
-
收起/展开侧边栏
image.png
-
清除日志
image.png
-
创建实时运行的脚本
image
- 按日志类型显示日志
image
- 运行脚本
image
4. Sources
源代码面板，主要功能查看网页的源代码，包括js/css/html/图片等和js断点调试。
image.png
主要介绍下js断点调试面板
image
-
continue：继续执行代码，直到遇到另一个断点
-
step_over：按正常步骤，应该会一行一行的执行相关代码，以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上。
-
step_into：进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。
-
step_out：在已进入一个函数后，单击此按钮将导致函数定义的其余部分的运行，调试器将将其执行到父函数。
-
step: 仅下一步操作。
-
disable-breakpoints：控制断点开/关的按钮。
-
pause-gray：在异常处产生断点。
5. Network
image.png
工具栏
image.png
每个按钮对应的功能依照从左到右的顺序：
- 停止/开启网络监听
- 清除当前的网络日志
- 筛选开关，关键词筛选
- 日志保留，一般用于保留跨域页面跳转前的请求日志
- 缓存开关，禁止缓存静态资源
- 网络设置，可模拟WiFi，4G，3G，2G网络环境
- 上传网络日志，可上传他人的网络日志文件查看
- 下载网络日志，将当前观测到的网络情况，以文件形式保存下来
网络资源类型
image
- XHR 接口请求
- JS js文件
- CSS css文件
- Img 图片资源
- Media 媒体资源，一般是音乐视频】
- Font 自定义字体
- DOC 文档文件，比较少见
- WS websocket
- Manifest manifest文件
- Other 其他资源
时序图
image
顶部是时间，实心绿线代表网络请求，长度越长，代表网络请求间隔越长。
具体网络请求
image
左侧是网络请求列表，点击它，会显示右侧具体请求的信息。
- headers，网络请求信息，包含完整的URL信息，http请求头，响应头，请求参数，请求方式等
- Preview 接口响应的预览
- Response 接口响应，和上面区别就是没有被浏览器格式化。本质上是一样的
- Initiator 来解释请求的发起过程
- Timing 请求耗时
加载总览
image
解释下这张图的意思，该网络日志的检测记录了
- 101个请求
- 网络请求传输了221KB
- 一共有1.5MB的资源，包括js,css,html,等等
- 耗时1.61S
- DOMContentLoaded 指的是HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
- Load 指的是仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。
6.Performance
网页性能检测工具，可以用查看网页的FPS，CPU，根据FPS，CPU的异常，借此判断网络是哪方面出现了问题，动画卡顿，还是DOM创建过于频繁，内存泄漏等情况。
image.png
下面演示下如何启动性能检测工具
image.png
工具栏
image
从左到右功能依次是
- 开启/停止录制
- 刷新
- 清除记录
- 上传性能检测文件
- 下载观测到的记录，保存为一份文件
- Screenshots 开启截图
- Memory 开启/关闭内存观测
简略图
image.png
看右侧有三个指标，FPS，CPU，NET分别代表页面帧率，页面CPU使用率，网络请求。
- FPS过大时，会显示红色的长条，代表有个长帧。
- CPU栏
- 黄色：js的操作所占内存(js代码评估及函数调用)
- 蓝色：html操作所占的内存(主要是html编译)
- 紫色：css操作所占的内存(css样式计算等)
- 灰色：其他操作所占的内存
详情图
image.png
- network 网络请求，跟network面板的时序图使用差别不大
- Frames 每一个时间点的页面截图
- Interactions 动画，主要用来观看页面动效
- Main js主线程，这个是常用的工具，在这里可以观察到整个周期js执行了哪些函数和方法，调用栈
主要给讲一下main这个火焰图
image.png
- 从上往下，上一层级任务是下一层级的总集合
- 函数是从左往右执行的
- 层数越多，说明调用栈越多
概览图
image
-
Summary 监测时间段的总览
-
Loading 加载时间
-
Scripting js执行时间
-
Rendering 渲染时间
-
painting 绘画时间
-
Bottom Up 事件列表，从底到上
当我们在main火焰图里面，选择某一个函数的时候，可以看到任务的执行栈，是从哪里开始到哪里结束的，以及每一步的耗时
image.png
- Call Tree 函数调用栈
和Bottom-UP类似，当在main选中某一个函数的时候， 这里会自动显示函数栈
image
7.Memory内存检测工具
image
- Heap snapshot - 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
- Allocation instrumentation on timeline - 在时间轴上记录内存信息，随着时间变化记录内存信息
- Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。
8.Application
image
用来查看/修改/删除本地缓存，包括
- localstorage
- cookies
- session Storage
image.png
还有
- IndexDB 本地数据库，允许储存大量数据（加强版LS）
- WebSQL 本地数据库，仅有Chrome支持
9.Security
用来查看SSL证书
拿百度首页举例子，左侧是网站来源，右侧网站的证书信息
image
10.Lighthouse
页面性能打分工具
较为简单，直接点击使用即可，会生成一份页面评估报告
image
