这是我参加青训营的第十天
分享要点：
1.Chrome devTools
对于web前端而言，我们每天都在使用开发调试工具进行查看dom结构、js断点和查看分析登录请求等操作，最熟悉的开发调试工具 应该莫过于Chrome的Devtools和Firefox的FireBug了。Chrome开发者工具其实是一个用HTML，JavaScript和CSS写的Web应用程序，被集成在浏览器中，其基于远程调试协议。
远程调试协议Webkit 在 2012 年就已经引入，目前所有 Webkit 内核的浏览器都支持这一特性。远程调试协议基于 WebSocket，利用 WebSocket 建立连接 客户端（如DevTools） 和浏览器内核的快速数据通道，Chrome的Devtools仅仅只是Webkit远程调试协议的一个应用案例。
2.移动端 H5 调试
远程调试模式真正发挥作用的还是移动端设备的调试场景。移动端设备有运行环境，却没有合适的开发和调试环境，借助于webkit的远程调试模式，可以使得我们很方便的查看和调试移动端设备。移动端chrome开启远程调试模式后json数据会被打到debugging端口（localhost:9222），因为安全考虑，chrome限制了只能是本地localhost的，不能打到指定ip之上。此时，需要通过某种方式，将移动端9222端口的数据绑定到pc端，之后才能PC端便可以通过PC端本地端口与移动端页面进行调试。远程调试协议作为一个强大的通用的协议，支持了不同server或客户端的通信。浏览器的调试，其实最后都落脚到引擎：渲染引擎和 JavaScipt 引擎。对于css的修改、js的断点等，如何落实到渲染引擎上，上下文环境切换，函数调用栈追踪等等，还有更多东西值得挖掘。
3.NodeJs 应用调试
Inspector Protocol + Chrome Devtool
Inspector Protocol + VS Code
4.常用调试技巧
线上即时修改Overrides
利用代理解决开发阶段的跨域问题
启用本地 source map
使用代理工具 Mock 数据
