这是我参与「第五届青训营 」笔记创作活动的第13天
今天的视频课 [Web调试技术]是围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，我们应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，老师将分为 PC 端与移动端展开解读，而移动端调试，通过对理论拆解，逐步剖析在移动端调试中真机与代理调试的过程步骤，并在课程最后为大家带来有关常用工具的推荐。
我把今天老师讲解的知识进行了整理和概括，具体内容如下：
1.Bug与Debug
既然我们聊到了调试技术，那么不可避免的一个问题就是Bug，我们在开发过程中总会遇到各式各样的问题（Bug），其实调试就是解决这些问题（Debug的过程）。前端Debug有如下四个特点：
- 多平台：浏览器、Hybrid、Nodejs、小程序、桌面应用等。、
- 多环境：本地开发环境、线上环境。
- 多工具：Chrome devTools、Charles、Whistle等。
- 多技巧：Console、BreakPoint、代理等。
2. Chrome DevTools调试方法（Pc端调试）
此方法也是我们在开发中最常用的了，毕竟浏览器非常方便，我们可以通过以下几个方式调试：
- element模块，动态修改元素和样式。
- console模块，console有许多方法作用于调试技巧，例如log、warn、error、info等方法。其中table方法用于具象化的展示JSON和数组数据。dir方法可以通过类似文件树的方式展示对象的属性。
- sorce模块，这一模块我们最常用的就是对代码进行断电调试。
- Network模块，这是网页网络的相关操作，前后端数据请求的地址等等。
- Application模块，这里展示与本地存储相关的信息。
- Lighthouse模块，是标记核心web指标，体现web性能高低的测试工具。
3.移动端H5调试
h5的调试多种多样，大家可以根据自己的喜好选择。
（1）真机调试：真机调试分为ios和Android，各调试方法如下：
（2）Vconsole，这是一款调试工具，它里面功能非常全，如日志（Logs）、网络（network）、节点（element）等等。
（3）使用代理工具调试，它的原理就是电脑作为代理服务器，手机通过HTTP代理链接到电脑，然后手机上的请求经过代理服务器。
下面我推荐一些常用的代理工具：
Charles：适合查看、控制网络请求、分析数据（要收费）。
Fiddler：与Charles类似，适合Windows平台。
spy-debugger：远程调试手机页面，抓包。
Whistle：基于Node实现的跨平台web调试代理工具。
4.常用开发调试技巧
- 线上即时修改overrides，主要操作如下：
2.利用代理解决开发阶段的跨域问题，也就是浏览器请求代理服务器，代理服务器转发请求真实服务器，然后它响应给代理服务器，最后通过代理服务器转发响应给浏览器。
3.启用本地source map，这一方法实现步骤如下：
