前言

本文将围绕前端开发中所遇见的 BUG 出发，讲述作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便理解，本文将从 PC 端和移动端两部分进行梳理。

前端 Debug 的特点

多平台
多环境
多工具
多技巧

PC 端调试

Chrome DevTools

1.Element

动态修改元素的样式
选中元素修改对应的状态

2.Console

console.log
console.warn
console.error
console.debug
console.info
console.table
console.dir

选中一个元素后再到 Console 面板输入$0，会发现刚刚选中的元素出现在 Console 中. 想要在 Console 面板中用 JavaScript 操作元素时，$0就十分方便，另外可以搭配 console.dir($0) 来观察元素的各个属性，或者直接使用$0

3.Source Tab

资源文件目录树
代码预览区域
Debug 工具栏
断点调试器

Breakpoints

添加断点进行代码调试 压缩后的代码如何调试

Source Map

SourceMap的问题： 一般在前端打包阶段，通过插件将构建好的SourceMap上传到前端监控平台，比如Webpack对应的插件 @sentry/webpack-plugin。发生错误时，错误上报，可以到对应的监控平台，根据堆栈信息和上传的SourceMap，找到出错的源码信息。

但SourceMap不上传到生产环境（避免体积增大，避免源码被查看）

4.Network

设置网络速率
查看网络请求信息

Application

浏览器存储相关

Performance

查看网络性能相关信息

Lighthouse

查看性能分析

核心 Web 指标

Largest Contentful Paint(LCP)
First Input Delay (FID)
Cumulative Layout Shift(CLS)

移动端通调试

真机调试

IOS

使用 Lightning 数据线将iPhone与 Mac相连
iPhone开启 Web检查器（设置->Safari ->高级→开启Web检查器)
iphone使用Safari浏览器打开要调试的页面
Mac打开 Safari浏览器调试(菜单栏一>开发->iPhone设备名→>选择调试页面)
在弹出的 Safari Developer Tools 中调试

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式，勾选USB调试，并允许调试
电脑打开Chrome浏览器，在地址栏输入:chrome://inspect/#devices并勾选Discover uSB devices选项
手机允许远程调试,并访问调试页面 5.电脑点击inspect按钮
进入调试界面

VConsole

代理调试

Charles：适合查看、控制网络请求，分析数据；
Fiddler：适合windows平台；
spy-debugger：远程调试手机页面，抓包；
Whistle：基于 Node 实现的跨平台 Web 调试代理工具；

NodeJS 调试

常用工具

常用小技巧

线上即时修改 Overrides

在 Source 中，通过Overrides（替换）进行整个文件的替换，之后在page页修改后进行ctrl + s进行保存，即可得到更改后的结果。

利用代理解决前端开发中的跨域问题

使用代理工具 Mock 数据

最后

小黄鸭调试大法：传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。 --《程序员修炼之道》

ps：- 代码注释法-- 利用二分法思想逐行去注释代码，直到定位问题

一起努力变强吧！

前端开发调试小知识 | 青训营

前言