Bug 与 Debug:Bug 的产生、前端 Debug 特点

Chrome 的 DevTools

移动端 H5 调试:真机调试、代理工具调试

开发调试技巧

# 前端必须知道的开发调试知识 - 笔记

# Bug 与 Debug

# Bug 的产生

这一切都要从一只虫子 (bug) 说起,最早的计算机故障就是由一只飞蛾引起的。

image-20220117140255844

# 前端 Debug 特点

  • 多平台:浏览器、Hybrid、Node.js、小程序、桌面应用等
  • 多环境:本地开发环境、线上环境
  • 多工具:Chrome DevTooles、Charles、Spy-Debugger、Whistle、vConsole 等
  • 多技巧:Console、BreakPoint、SourceMap、代理等

# Chrome 的 DevTools

我录过一期 Chrome 调试方法的视频,有兴趣也可以看看 -> link

# Elements—DOM 树 动态修改元素与样式

  • 点击.cls 开启动态修改元素的 class

  • 输入字符串可以动态的给元素添加类名

  • 勾选 / 取消类名可以动态的查看类名生效效果

  • 点击具体的样式值(字号、颜色、宽度高度等) 可以进行编辑,浏览器内容区域实时预览

  • Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则

  • 可以使用 2 种方式强制激活伪类:

    选中具有伪类的元素,点击:hov;

    DOM 树右键菜单.选择 Force State

# Console— 控制台

在这个面板中可以直接写入 & 运行单 / 多行 js 代码

左侧可以选择警告等级,对日志进行分类查看

Console 相关方法:

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info

小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型

上面的都是用于区分警告等级,主要区别就在于显示颜色不同,而还有一种日志方法,可以具像化的展示 JSON 和数组数据,方便调试:

  • console.table

另外,console 打印的日志还可以自定义 css 样式:

  • 通过占位符给日志添加样式,突出重要的信息
  • % s:字符串占位符
  • % o:对象占位符
  • % c:样式占位符
  • % d:数字占位符

例如:

console.log( "%s %o,%c%s", "hello",{name: 'tome', age: 18), 'font-size: 24px; color: red', 'Welcome to bytedance!');

最后还有一个比较少用的方法,用于展示 HTML 节点的 DOM 对象:

  • console.dir

# Sources— 源码

调试器使用:

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

前端代码天生具有 "开源" 属性,出于安全考虑,JavaScript 代码在上线时通常会被压缩,压缩后的代码只有一行,变量使用’a’.'b’等替换,整体变得不可阅读。

那么压缩后的代码如何调试呢?

答案是:通过在打包过程中生成 SourceMap 文件来对压缩后的代码进行映射,从而可以在调试时还原源码

SourceMap: mappings 字段存储了源文件和 SourceMap 的映射

  • 英文,表示源码及压缩代码的位置关联
  • 逗号,分隔一行代码中的内容。
  • 分号,代表换行。之所以没有显示分号是因为压缩后的代码就只有一行。

# Performance— 性能

比较复杂,主要用于高级性能分析

image-20220117144730077

# Network— 网络请求

用于查看、筛选各类网络请求,查看请求的详情信息,请求发出堆栈,请求时间栈等等

image-20220117144903372

# Application

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

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

通过此面板可以清除网站缓存、本地存储、Cookie 等

# 移动端 H5 调试

# 真机调试

# IOS

  1. 使用 Lightning 数据线将 iPhone 与 Mac 相连

  2. iPhone 开启 Web 检查器(设置→Safari -> 高级 -→> 开启 Web 检查器)

  3. iPhone 使用 Safari 浏览器打开要调试的页面

  4. Mac 打开 Safari 浏览器调试 (菜单栏→> 开发 - iPhone 设备名 -→选择调试页面)

  5. 在弹出的 Safari Developer Tools 中调试

  6. Tips:没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的 ios 模拟器

# Android

  1. 使用 USB 数据线将手机与电脑相连
  2. 手机进入开发者模式。勾选 USB调试 。并允许调试
  3. 电脑打开 Chrome 浏览器,在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
  4. 手机允许远程调试,并访问调试页面
  5. 电脑点击 inspect 按钮
  6. 进入调试界面

# 代理工具调试

原理:

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

以 Charles 为例:

  1. 安装 Charles
  2. 查看电脑 IP 和端口
  3. 将 IP、端口号填入手机 HTTP 代理
  4. Charles 允许授权
  5. 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
  6. 手机访问开发环境页面

常用工具:

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

# 开发调试技巧

# Chrome 的 DevTools

  1. Source->override:通过开启此功能,可以使得在 DevTools 中的所有更改(DOM、CSS、JS)持久化,并可以查看与原文件的差异(类似 git)
  2. CORS (跨域) 问题:通过 Whistle 开启代理,使用代理对真实请求地址进行封装和转发,让浏览器请求同源地址,代理转发到真实地址
  3. 启用本地 SourceMap:将远程不存在的 SouceMap 不存在时,使用代理,将请求代理到本地的 SourceMap 文件,便可以进行线上调试
  4. 小黄鸭调试大法(🐤):传说中程序大师随身携带一只小黄鸭,在调试代码的时候会在桌上放上这只小黄鸭,然后详细地向鸭子解释每行代码,然后很快就将问题定位修复了。 -《程序员修炼之道》

# 参考资料

  • 字节青训营课程

  • MDN 中文文档