这是我参与「第五届青训营 」伴学笔记创作活动的第 36 天，前几天我们学习了Web调试技术，下面就是我在课堂上学习的知识大概：

前言

调试的定义：代码在某个平台运行，把运行时的状态通过某种方式暴露出来，传递给开发工具做 UI 的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等。具体的一些内容可上百度查询，这里不过多介绍。

PC端调试

Bug与Debug

对于Bug大家应该都不陌生，但是要清楚地表达出来又很困难，那Bug到底是什么意思呢？Debug是对Bug的修复。

前端的Debug有四个特点：多平台（浏览器，小程序，Nodejs，Hybrid，桌面应用等），多环境（本地开发环境，线上环境），多工具（Chrome devTools，charles，Spy-debugger，whistle，vConsole...），多技巧（Console，BreakPoint，sourcemap，代理等）。

Chrome devTools

如何打开Chrome devTools？ 打开我们的浏览器，然后右击鼠标，在出现的一栏里面找到检查并打开他，之后就得到了一个和下图差不多的界面（点击检查之后这个Chrome devTools就打开了）

动态修改元素和样式

console

sorce Tab

Break Point与watch

Scope与Call stack

Source Map

这个Source Map可以调试压缩后的代码。

NetWork

Application

Performance

页面卡顿、查看FPS指标、寻找性能瓶颈、优化代码。

Lighthouse

移动端H5调试

真机调试

Vconsole

使用代理工具调试

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

Node js调试

常用开发调试技巧

线上及时修改overrides

1.打开Sources面板下的overrides。2.点击select folders for overrides。选择一个本地的空文件夹目录。3.允许授权。4.在page中修改代码，修改完成后command+s保存.5.打开devTools，点击右上角的三个小点，more tools，changes，就能看到所有修改了。

利用代理解决开发阶段的跨域问题

启用本地source map

使用代理工具mock数据

小结

这些东西需要多练，谢谢大家阅读。