首页 前端 学习笔记

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 中文文档