这是我参与「第四届青训营 」笔记创作活动的第4天。
- 前端多平台、多环境，因此多工具、多技巧
DevTools
Styles
- .cls 可以动态添加删除类名，:hov 可以动态添加删除伪类（或右键 force state）。
- 对某种样式可以点击直接修改。
- 使用 computed 标签快速定位到某个属性定义位置。
- 右键元素可以截图等，右键有很多功能。
Console
- log, warn, error, debug, info 可以展示不同类型的日志。
- 日志颜色代表了不同类型（白色 string，蓝色 number）
- console.log(obj) 展示的数据需要折叠，可以用 console.table(arr) 展示数组，或者用 console.dir(dom) 拿到 DOM 元素的各种属性。
- console.time() 和 console.timeEnd() 可以用来测试程序执行的时长。
Source
Source 页面可以用来展示项目的源代码。左侧是资源文件，中间是代码预览，右侧是 Debug 工具等。
- 在代码中加入 debugger 可以在添加的位置进行调试状态。或者在 Source 页面左侧点击行号可以添加断点。
- 在调试状态下，可以将鼠标指向某个变量，即可拿到对应的值。
编译工具栏
- Watch：添加监视的变量
- Breakpoints：可以临时取消断点。
- Scope：查看作用域和变量（尤其是闭包）
- Call stack: 调用堆栈。
- XHR/fetch breakpoints：网络请求断点。
- DOM breakpoints：元素发生变化时添加断点，开发动态效果时常用。
压缩的代码如何调试
- 自己的代码：使用 Source map 生成映射
- 上线后的代码：部署不带 Source map 的代码， 在监控平台上传 Source map 文件。
Network
- 下方状态栏显示了各种耗时，请求数量等。
- Waterfall展示了串行和并行请求的各类事件。
- Throwttling 中可以模拟低网速环境中的情况。
- 双击查看请求详情。
Application
- Storage > clear site data 可以快速清除缓存等。
Performance
页面卡顿
-
查看 FPS 指标
可以在 Settings > More tools VS开启 Frame rendering stats 查看帧数情况。
-
寻找性能瓶颈
在 performance 界面可以查看异常的块，进而查找对应代码。
-
优化代码
Lighthouse 页面
- 点击性能分析按钮可以查看性能得分。
- 展示了 FCP LCP TI 等时间信息。
移动端 H5 调试
- IOS 可以使用 Web 检查器。
- Android 可以使用 USB 调试，在
chrome://inspect/#devices里面勾选 Discover USB devices 选项并调试。 - 注入 VConsole 组件可以查看网络请求、日志等。
- 使用代理工具如 Charles，Fiddler 进行网络调试。
NodeJS 调试
- 使用 Inspector protocol + Chrome Devtool 调试。
- 使用 VSCode 进行调试。
常用技巧
Override 样式文件
在 Sources > Overrides VS 选择一个文件夹，启用 Override，并通过 More tools > Changes 查看改动。
现在普遍使用热更新替代这个问题。
跨域问题
开发阶段，前端页面在本地调试的时候需要访问远程的某个服务，具有跨域问题（CORS Error）。我们可以使用代理工具间接请求远程接口。
代理工具可以使用其他方式请求接口，从而绕过浏览器跨域问题。
启用本地 Source map
对线上运行的，没有 Source map 打包的代码，可以利用代理工具将 Source map 文件的请求拦截并返回本地文件。
在 Charles 中，使用 Map Local 将对应的 map 文件URL 映射到本地，就可以实现调试线上代码的功能了。
使用代理工具进行 Mock 数据
某些后端接口可能暂时无法访问（或者还没有开发），可以使用 Mock 的方式模拟数据进行开发。
同样在 Charles 中使用 Map Local 功能。对某个接口请求直接右键点击 Map Local，并指定某个本地数据文件即可。
小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
-- 《程序员修炼之道》
没有小黄鸭的可以使用同事和朋友代替。
