开发调试知识|青训营

用户1415385661368
97 阅读5分钟

Bug 与 Debug

Bug 的产生

世界上第一次出现电脑问题是由于虫子导致的，因此将问题命名为 Bug（虫子）。

前端 Debug 的特点

  1. 多平台

    • 浏览器、Hybrid、NodeJS、小程序、桌面应用等

  2. 多环境

    • 本地开发环境、线上环境

  3. 多工具

    • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...

  4. 多技巧

    • Console、BreakPoint、sourceMap、代理等

Chrome DevTools

  • Elements | Console | Source | Performance | Network

  • 通过 F12 打开 Chrome DevTools。

Elements

显示页面的结构以及元素的样式。

  • 动态修改元素和样式

Console

控制台，显示网页的日志。

分类：

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table

    具像化的展示 JSON 和 数组数据

  • console.dir

    通过类似文件树的方式展示对象的属性

  • 占位符

    给日志添加样式，可以突出重要的信息

    • %s：字符串占位符
    • %o：对象占位符
    • %c：样式占位符
    • %d：数字占位符

Source

  • 左侧：页面资源文件目录树

  • 中间：代码预览区域

  • 右测上面：Debug 工具栏

    从左到右依次为：

    • 暂停（继续）
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活（关闭）所有断点
    • 代码执行异常处自动

  • 右侧下面：断点调试器

    • Watch：点击右侧的 + 号可以添加对变量的监控，查看该变量的值
    • Breakpoints：断点列表，勾选 / 取消可以激活 / 禁用对应断点
    • Scope：作用域列表（包含闭包）
    • Local：当前作用域
    • Global：全局作用域
    • Call Stack：当前 JavaScript 代码的调用栈
    • XHR / fetch Breakpoints：所有请求的断点
    • DOM Breakpoints：
    • Global Listeners：
    • Event Listener Breakpoints：
    • CSP Violation Breakpoints：

Network

显示网络请求，以及提供网络设置功能。

Application

显示本地存储相关的信息。

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

Performance

点击左上角的实心圆进行录制。

  • 第一层：控制面板

  • 第二层：概览面板

    • FPS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费时间

  • 第三层：线程面板

    • Frames：帧线程
    • Main：主线程，负责执行 JavaScript，解析 HTML/CSS，完成绘制
    • Raster：Raster 线程，负责完成某个 layer 或者某些块 tile 的绘制

  • 第四层：统计面板

Lighthouse

显示核心 Web 指标：

  • Largest Contentful Paint（LCP）：最大内容绘制，测量 加载 性能

    为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生

  • First Input Delay（FID）：首次输入延迟，测量 交互性

    为了提供良好的用户体验，页面的 FID 应为 100 毫秒或更短

  • Cumulative Layout Shift（CLS）：累计布局偏移，测量 视觉稳定性

    为了提供良好的用户体验，页面的 CLS 应保持在 0.1 或更少

移动端 H5 调试

真机调试 | 代理调试 | 常用工具

真机调试

iOS

  1. 使用 Lightning 数据线将 iPhone 与 Mac 相连
  2. iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
  3. iPhone 使用 Safari 浏览器打开要调试的页面
  4. Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
  5. 在弹出的 Safari Developer Tools 中调试

没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器。

Android

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

直接使用手机扫码查看，体验更佳。

VConsole

  • 日志（Logs）：console.log | info | error | ...
  • 网络（Network）：XMLHttpRequest，Fetch，sendBeacon
  • 节点（Element）：HTML 节点树
  • 存储（Storage）：Cookies、LocalStorage、SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

使用代理工具调试

原理：

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

以 Charles 为例：

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

默认情况下，Charles 无法抓取到 HTTPS 的请求，需要安装证书。

常用代理工具

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

NodeJS 调试

  1. 执行命令 node --inspect=8888 index.js
  2. chrome 浏览器访问服务
  3. 点击绿色 node 图标打开 node 调试面板（在 chrome://inspect/#devices 中配置 network target）
  4. 在 node 调试面板中使用断点调试

常用开发调试技巧

线上即时修改 Overrides

  1. 打开 Sources 面板下的 Overrides
  2. 点击 Select folders for Overrides。选择一个本地的空文件夹目录
  3. 允许授权
  4. 在 page 中修改代码，修改完成后 command + s 保存
  5. 打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

  1.  浏览器   === 请求 ===>   代理服务器   = 转发请求 =>   真实服务器
  2.  浏览器   <= 转发响应 =   代理服务器   <=== 响应 ===   真实服务器

启动本地 source map

线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。

使用代理工具 Mock 数据

  1. 右键选中要 mock 数据的接口，选择 save response，保存文件到本地
  2. 本地打开保存的文件，编辑想 mock 的数据并保存
  3. 右键选中第一步的接口，选择 Map Local，Local Path 选择第二步的文件
avatar
文章
阅读
粉丝