这是我参与「第五届青训营 」伴学笔记创作活动的第23天。
前端开发调试
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
Chrome DevTools
- 动态修改元素和样式
- 点击.cls 开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- computed下点击样式里的箭头可以跳转到styles面板中的css规则
- console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 具象化的展示JSON和数组属性
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符
给日志添加样式，可以突出重要的信息
- %s:字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符
- Break Point 与Watch
- 使用关键字debugger或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover 变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
- Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
- Source Map
6. sorce Tab
区域1： 页面资源文件目录树
区域2： 代码预览区域
区域3： Debug工具栏
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断电
- 代码执行异常处自动
区域4： 断点调试器
- NetWork
区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4：Request Table 面板
区域5：总结面板
区域6：请求详情面板
- Application Application面板展示与本地存储相关的信息
- local storage
- session storage
- indexedDB
- web sql
- cookie
- Performance
- Lighthouse
移动端H5调试
真机测试
iOS
Android
VConsole
- 日志
- 网络
- 节点
- 存储
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
NodeJS调试
- Inspector Protocol + Chrome Devtool
- Inspector Protocol + VS Code
常用开发调试技巧
- 线上即时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
使用Map Local 网络映射功能来访问本地的Source Map文件
- 使用代理工具Mock数据
- 小黄鸭调试大法
