一、Bug和Debug

• 前端debug的特点：多平台、多环境、多工具、多技巧

二、Chrome DevTools

2.1 动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选、取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• computed下点击样式里的箭头可以跳转到styles面板中的css规则

2.2 console

• console.log()/console.info()/console.warn()/console.error()/console.debug() 可以打印不同类型的值。
• console.table() 可以用于打印对象或数组，在控制器中会以表格的形式显示，属性值都是整齐排列的。
  不同于console.log()的树视图，不用每次都手动折叠查看信息。
• console.group()/console.groupEnd() 作用：如果要输出的信息太多，可以分组显示。
• console.assert() 作用：对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

2.3 Score Tab

分四个区域：页面资源文件目录树、代码预览区域、Debug工具栏、断点调试器

2.3.1 Break Point与 Watch

• 使用关键字debugger或代码预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover变量的值
• 在调试器watch右侧点击+可以添加对变量的监控，查看该变量的值

2.3.2 scope与call stack

• 展开scope可以查看作用域列表
• 展开call stack 可查看当前js代码的调用栈

2.3.3 压缩后代码如何调试

source map

• mappings字段存储了源文件和source map映射

2.4 network

分为：控制面板、过滤面板、概览面板、request table面板、总结面板、请求详情面板

2.5 application

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

2.6 performance

分为：控制面板、概念面板、线程面板、统计面板

2.7 lighthouse

核心web指标：LCP 、FID 、CLS

三、移动端H5调试

3.1 真机调试

iOS、安卓

3.2 vconsole

日志、网络、节点、存储、手动执行js命令行、自定义插件

3.3 使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上的请求都经过代理服务器

四、nodejs 调试

• 执行命令：node-inspect=8888 index.js
• chrome 浏览器访问服务
• 点击绿色node图标打开node调试面板
• 在node调试面板中使用断点调试

五、常用开发调试技巧

• 线上即时修改overrides
• 利用代理解决开发阶段的跨域问题
• 启用本地source map
• 使用代理工具mock数据