这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

Web 调试技术|青训营笔记

前端Debug特点

多平台
浏览器，Hybird，Nodejs,小程序，桌面应用等

多环境
本地开发环境，线上环境

多工具
Chrome devTools，Charles， Spy-Debugger， Whistle，vConsole..

多技巧
Console，BreakPoint，sourceMap，代理等

Chrome DevTools

按F12进入 检查界面

动态修改元素和样式

点击.cls开启动态修改元素的class

输入字符串可以动态的给元素添加类名

勾选/取消类名可以动态的查看类名生效效果

点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

Computed下点击样式里的箭头可以跳转到styles面板中的css规则

Console

console.log

console.warn

console.error

console.debug

console.info

以上5个基本相同，有些颜色不一样

console.table

具象化的展示JSON和数组数据

console.dir

通过类似文件树的方式展示对象属性

占位符

给日志添加样式，可以突出重要信息 %o 对象占位符

Source Tab

区域1：页面资源文件目录树 区域2：代码预览区域 区域3：Debug工具栏 区域4：断点调试器

Break Point 与 Watch

使用关键字debugger或代码预览区域行号可以设置断点

展开Breakpoints列表可以查看断点列表。

暂停状态下，鼠标hover变量可以查看变量的值

在调试器Watch右侧点击+可以添加对变量的监控

Scope 和 Call Stack

展开scope可以查看作用域列表(包含列表)

展开Call Stack可以查看JS代码的调用栈

Source Map

开源代码具有天然“开源属性”，在上线之前js代码通常会被压缩成只有一行。

压缩后可以通过source map工具进行调试。

NetWork

区域1：控制面板 区域2：过滤面板 区域3：概览区域 区域4：Request Table 面板 区域5：总结面板 区域6：请求详情面板

Application

Application面板展示与本地存储相关的信息

Performance

区域1：控制面板 区域2：概览面板

FPS：每秒帧数

CPU：处理每个任务花费时间

Net：各个请求花费时间

区域3：线程面板

Frames：帧线程

Main：主线程，负责执行JS，解析HTML/CSS，完成绘制

Raster：Raster线程，负责完成某个layer这某些块（tile）的绘制

区域4：统计面板

运用示例：

页面卡顿-> 查看FPS指标->寻找性能瓶颈->优化代码

Lighthouse

测试性能指标，也可以提出建议

移动端调试

1. 真机调试
2. Vconsole
3. 使用代理工具调试

Nodejs调试

inspector protocol + Chrome Devtool

1. 执行命令node --inspect=8888 index.js
2. chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板（在chrome://inspect/#devices 中配置network target）
4. 在node调试面板中使用断点

inspector protocol + VS code

VS code 点击运行，调价配置，启动调试，添加断点

常用开发调试技巧

1. 线上即时修改 Overrides
2. 利用代理解决开发阶段的跨域问题
3. 启用本地 source map
4. 使用代理工具mock数据
5. 小黄鸭调试大法:
   传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌子上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
   《程序员修炼之道》