Web 技术调试 | 青训营笔记

这是我参加「第五届青训营」伴学笔记创作活动的第 9 天

Bug 与 Debug

前端Debug 的特点

• 多平台
  • 浏览器、Hybrid、NodeJs、小程序、桌面应用等
• 多环境
  • 本地开发环境、线上开发环境
• 多工具
  • Chrome devTools、Charles、Spy-Debugger、Whistle、vCondole
• 多技巧
  • Console、BreakPoint、sourceMap、代理

Chrome DevTools

动态修改元素和样式

• 点击 .cls 开启动态修改元素的 class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• Computed 下点击样式里的箭头可以跳转到styles面板中的 css 规则
• 可以用以下两种方式强制激活伪类
  • 选中具有伪类的元素，点击：hov
  • DOM树右键菜单，选择 Force State

Console

• console.log
• console.warn
• console.error
• console.debug
• console.debug
• console.info
• console.table 具体化的展示 JSON 和 数组数据
• console.dir 类似文件树的方式展示对象的属性
• 占位符 给日志添加样式，可以突出重要的信息 %s: 字符串占位符；%o: 对象占位符；%c：样式占位符；%d：数字占位符

Sorce Tab

Break Point 与 Watch

• 使用关键字 debugger 或 代码预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover 变量可以查看变量的值
• 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值

Scope 与 Call Stack

• 展开 Scope 可以查看作用域列表（包含闭包）
• 展开 Call Stack 可以查看当前 javaScript 代码的调用栈

压缩后的代码如何调试

• source Map
  • mappings 字段存储了源文件和Source Map的映射
    • 英文，表示源码及压缩代码的位置关联
    • 逗号，分隔一行代码中的内容
    • 分号，代表换行

NetWork

Application

Application 面板展示与本地存储相关的信息

• Local Storage
• Session Storage
• Indexed DB
• Web SQL
• Cookie

Performance

移动端 H5 调试

• 真机调试

• VConsole

  • 日志（Logs）
  • 网络（Network）
  • 节点（Element）
  • 存储（Storage）
  • 手动执行JS 命令行
  • 自定义插件

• 使用代理工具调试

  • 原理：
    • 电脑作为代理服务器
    • 手机通过 HTTP 代理连接到电脑
    • 手机上的请求都经过代理服务器

• 常用代理工具

  • Charles：适合查看、控制网络请求，分析数据
  • Fiddler：与 Charles 类似，适合 windows 平台
  • spy-debugger：远程调试手机页面，抓包
  • Whistle：基于 Node 实现的跨平台 Web 调试代理工具

Nodejs调试

• Inspector Protocol + Chrome Devtool
• Inspector Protocol + VS Code

常用开发调试技巧

• 线上即时修改Overrides
• 利用代理解决开发阶段的跨域问题
• 启用本地 source map
• 使用代理工具 Mock 数据

总结

这节课有部分知识还是知道的，但大部分还是不太了解或者是第一次听过的，还真得慢慢的学习，慢慢的了解，不能一口吃成大胖子，否则压力太大，喘不过气来了~