基本原则
定位问题： 在开始调试之前，首先要明确问题的具体表现和出现场景，以便更准确地定位问题的根源。
逐步排查： 将问题分解为小步骤，并逐步排查每一步的执行结果，以找到出错的地方。
输出信息： 使用 console.log、console.error 等输出信息到控制台，帮助你观察代码执行过程和变量的值。
断点调试： 利用浏览器开发者工具的断点功能，暂停代码执行，逐行查看和分析代码。
利用错误信息： 仔细阅读错误信息，包括报错的文件、行数以及错误信息本身，这能指导你快速定位问题。
Chrome Devtools
Elements
-
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则
-
强制激活伪类
- 选中元素，点击:hov
- 或者在DOM树中右键，选择Force State
Console
- console有以下几大类：
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table(具象化的展示JSON和数组数据)
- console.dir(通过类似文件树的方式展示对象的属性)
占位符：给日志添加样式，可以突出重要的信息
%s:字符串占位符，%o:对象占位符，%c:样式占位符，%d:数字占位符），例如
arduino
复制代码
console.log('%s %o,%c%s','hello',{name:'tome'},'color:red','Welcome');
Scope与Call Stack
- 展开Scope可以查看作用域列表，包括闭包
- 展开Call Stack可以查看当前JavaScript代码的调用栈
代码压缩后调试
前端代码天生具有开源属性，出于安全考虑，上线之前，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量名会被替换。
Source Map
它本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。
它解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。
- 英文，表示源码以及压缩代码的位置关联
- 逗号，表示分割一行代码中的内容
- 分号，代表换行
五、网络请求调试
XHR 请求： 在 Network 面板中可以查看所有的 XHR 请求，包括请求头、响应等信息。
Fetch 请求： 类似地，在 Fetch 请求中也可以监控请求和响应，以及请求的参数。
模拟网络条件： 在 Network 面板中，你可以模拟不同的网络条件，如慢速 3G，来测试应用的性能。
。
Performance
googlechrome.github.io/devtools-sa…
Lighthouse
- Largest Contentful Paint (LCP):最大内容绘制，测量加载生性能。为了提供良好的用户体验，LC应在页面首次开始加载后的2.5秒内发生。
- First Input Delay (FID)∶首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift (CLS)∶累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
移动端H5的调试
- ios
- 使用Lightning数据线将iPhone与mac相连进行调试
- Android
- 使用usb数据线将手机与电脑连接进行调试
-
前端调试面板VConsole
gitee.com/Tencent/vCo…
