pc端调试
前端调试的特点有多平台（浏览器，NodeJs，小程序，桌面应用等），多环境（本地开发环境，线上环境），多工具（Chrome devTools，charles），多技巧（Console，BreakPoint，sourceMap）。动态修改元素和样式，可以通过element面板，点击.cls动态修改元素的class，也可以输入字符串动态给元素添加类名，还能勾选，取消类名进行动态查看类名生效效果，或者更改样式值进行编辑，能通过：hov和force state强行激活伪类。Source面板分为页面资源文件目录树，代码预览区域和Debug工具栏，还有断点调试器，我们能通过打断点，然后按刷新键在断点前中止，其中的Scope中有本地，闭包，全局三部分，还能通过调用栈看函数调用的整个流程，而压缩后的代码要通过sourceMap进行映射，mapping字段存储了源文件和sourcemap的映射。Performance能在页面卡顿时用来查看fps指标，寻找性能瓶颈和优化代码。LightHouse中的LCP，FID和CLS是对页面性能的考量。
移动端调试
IOS是用Lightning数据线将iphone和mac相连，然后iphone开启web检查器，iphone用safari浏览器打开调试的页面，mac在safari浏览器中调试，在弹出的safari Developer Tools中调试。而安卓用USB数据线将手机和电脑连接，然后手机进入开发者模式，电脑打开chrome浏览器，在地址栏输入discover usb devices选项，手机允许远程调试，并访问调试页面，电脑点击inspect按钮，进入调试界面。
