这是我参与「第四届青训营 」笔记创作活动的的第6天
首先是debug的特点，多个平台例如浏览器、Hybrid、NodeJs、小程序等。然后是泛化环境分为本地开发环境、线上环境.复杂工具ta Chrome devTools, Charles, Spy-Debugger.最后是富含技巧， 以Console, BreakPoint, sourceMap为例.
如何动态修改元素和样式，首先点击.cs打开动态修改元素的class，紧接着输入宇符串给元素动态化添加类名，然后勾选或者取消类名动态的查看类名生效效果，click具体的样式值例如颜色、宽度、高度等，浏览器content区域实时动态化预览.
NET WORK页面区域最上面的是控制面板，然后的区域是过滤面，再是概览区域，左下是Request Table面板，右下脚区域是总结面板，最下面的区域则是请求详情面板.
如何调试呢？
在iOS设备上使用 Lightning 数据线将 iPhone 与 Mac 相连，开启 Web 检查器，再用iPhone使用 Safari 浏览器打开需要调试的页面，依次打开 Safari 浏览器调试，并在弹出的 SafariDeveloper Tools中进行调试.在Android系统中，首先使用 USB 数据线将手机与电脑相连，打开手机进入开发者模式，勾选USB 调试，并允许调试，在电脑打开Chrome浏览器，然后在地址栏输入地址跳转并勾选Discover USB devices 选项，允许手机远程调试，并访问调试页面，电脑点击 inspect按钮吧，最后进入调试界面.
关于使用代理工具调试，它的原理是电脑作为代理服务器，手机通过 HTTP 代理连接到电脑，手机上的请求都经过代理服务器.我们经常使用的代理工具有Charles、Fiddler、spy-debugger、Whistledeng
一些常用的开发技巧，线上即时修改Override，利用代理解决开发阶段中的跨领域问题，启动本地的source map，使用代理工具mock数据等方法.
今天这节课干货满满，需要很长数据消化和长时间去实践，期待下一次相遇.
