前端调试｜青训营笔记编写复杂程序离不开正确的调试技巧，这篇文章总结了前端常用的调试工具和使用方法。前端调试的场景可以

这是我参与「第四届青训营」笔记创作活动的的第 6 天。

编写复杂程序离不开正确的调试技巧，这篇文章总结了前端常用的调试工具和使用方法。

前端调试的场景可以分为：

PC 端浏览器

PC 端最常用的浏览器是 Chrome，同时其 DevTools 也是最好用的。

DevTools 有以下面板：

Elements
- 实时修改 DOM 结构、类名、CSS 样式的值
- 点击 Computed 中的计算值跳转到对应 CSS 规则
- 强制激活伪类
Console
- 查看输出的日志、报错信息
  - console.log
  - console.info
  - console.debug
  - console.warn
  - console.error
  - console.table
  - console.dir
  - 占位符添加样式
- 执行 JS 语句
Sources
- 查看页面资源文件
- 断点调试
  - 使用 debugger 或行号设置断点
  - 监控变量
  - 查看作用域列表
  - 查看调用栈
- 压缩后代码调试：Source Map
Network
- 网络请求相关信息
- 请求顺序、耗时、详情
Performance
- 性能相关信息
- FPS/CPU 时间/请求时间
- 线程：Frames/Main/Raster
Lighthouse
- 分析核心 Web 指标
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Application
- 展示与本地存储相关的信息
- LocalStorage
- SessionStorage
- IndexedDB
- WebSQL
- Cookie

移动端也需要在电脑上进行调试，有以下几种方法：

--inspect=port 选项启动 node，然后可以用 Chrome DevTools 或 VSCode 进行调试。