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

10.1 bug与debug

• bug无处不在，非常常见
• 前端debug特点
  • 多平台
  • 多环境
  • 多工具
  • 多技巧

10.2 Chrome Devtools

打开：浏览器右键菜单检查

元素Element选项卡

• 查看元素样式
• 动态修改样式
• 点击.cls按钮添加新类名
• 点击.hov查看伪类样式（force state）
• 计算值可以搜索筛选，也可以跳转到对应的类名
• 网页截屏在元素右键菜单里面

控制台console选项卡

• 在JS代码中使用console将消息输出到控制台，常用的有log, warn, error, debug, info
• 日志可以添加样式，使用类似于printf的格式化输出
• 不同类型的数据在控制台显示颜色一般不同
• console.table具象化展示JSON和数据数据
• console.dir类似文件树的方式展示属性

源代码Source选项卡

• 打断点：输入一行debugger，或点击行号
• 工具栏按钮：暂停/继续
• 鼠标移到变量上面，将显示变量的值，或使用右侧watch
• scope：作用域；call stack调用栈
• XHR/fetch breakpoints网络请求断点
• 压缩后的webpack代码怎么调试？：webpack配置开启sourcemap，抛出错误的地方可以直接映射到源码，为了安全sourcemap不上线，而是上传到监控平台，监控平台可以通过sourcemap恢复源码查看错误

网络network选项卡

• 可以在顶部筛选消息类型
• 瀑布图可以分析并行运行情况
• 限流throtting：模拟弱网环境
• 点击请求，查看详细信息

应用程序application选项卡

• 在此处查看本地存储，包括cookie和token等
• 可清理此网页的缓存数据

性能performance选项卡

• 查看网页运行性能
• 点击录制按钮，开始记录网页
• 可以观察线程的运行，帧的情况

灯塔lighthouse选项卡

• 一站式网站评估工具
• 性能评分，优化建议
• LCP, FID, CLS是三个关键参数

10.3 移动端调试

真机调试

• 使用连接线将手机与电脑连接

VConsole

• 在页面注入这个组件
• 打开之后和devtools使用类似

代理工具调试

• 常用工具：Charles, Fidder, spy-debugger, Whistle
• Charles：开启电脑代理，可以远程/本地代理资源，不过软件收费

10.4 Node.js调试

Inspect protocal + devtools

node --inspect=8888 index.js

通过Node.js控制台可以看到源码，打断点，分析代码

VScode调试

• 运行->启动调试
• 控制台内置于VScode中

10.5 常用开发调试技巧

线上即时修改

• 如果需要新的样式被重写，可以使用Override
• 代码选项卡，左侧选择Override，选择文件
• 修改会被重写到文件中
• more tools->changes可以查看修改的地方

代理解决跨域问题

• 启动代理，配置规则
• 将请求到本地某个url的请求，重定向到外部网络
• 部署到线上之后，使用的是另一种代理

启用本地sourcemap

• 使用代理工具
• 添加映射：远程map文件映射到本地文件

使用代理mock数据

• 接口形式自己造数据
• 选择接口，映射到本地文件

小黄鸭调试法

也就是逐行排查错误