这是我参与「第四届青训营 」笔记创作活动的的第11天
特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charies、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoin、sourceMap、代理等
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号，颜色，宽度高度等）
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table:具象化的展示JSON和数组数据
- console.dir：通过类似文件数的方式展示对象的属性
- 占位符：给日志添加样式：可以突出重要的信息
Sorce Tab
Debug工具栏从左到右依次为
- 暂停
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活所有断点
- 代码执行异常处自动
Break Point 与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码可以暂停执行
- 展开Breakpoints列表可以查看断点列表，
- 暂停状态下，鼠标hover变量可以查看变量的值
- 再调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Application
- Lacal Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
移动端H5调试
VConsole
- 日志
- 网络
- 节点
- 存储
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过http代理连接到电脑
- 手机上的请求都经过代理服务器
NodeJs调试
- 执行命令 node --inspect=8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
- vscode点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
线上即时修改Overrrides
- 打开Sources面板下的Overrides
- 点击Select golders for Overrrides。选择一个本地的空文件夹目录
- 在page中修改代码，修改完成后command + s 保存
- 打开devTools
利用代理解决开发阶段的跨域问题
启用本地source map
使用代理工具Mock数据
\
