前端必须知道的开发调试知识 | 青训营笔记

dsyislearning
152 阅读7分钟

前端必须知道的开发调试知识 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第 12 天

概述

本节课程主要分为四个方面：

  1. Web 应用使用 Chrome devTools 调试

  2. 移动端 H5 调试

  3. NodeJs 应用调试

  4. 常用代理工具的使用

Bug 与 Debug

Bug 的产生

第一个 bug ，1947 哈佛实验室，真的是计算机上的一只虫子（bug）。

bug or feature

No Code, no bug.

前端 debug 的特点

  1. 多平台

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

  2. 多环境

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

  3. 多工具

    • Chrome DevTools、Charles、Spy-Debugger、Whistle、VConsole ...

  4. 多技巧

    • Console、BreakPoint、SourceMap、代理...

Chrome DevTools

Elements

  • 点击 .cls 开启动态修改元素的 class
  • 输入字符串可以动态地给元素添加类名
  • 勾选 / 取消类名可以动态地查看类名生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览

Pasted image 20220804115444.png

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

Pasted image 20220804115435.png

可以用以下 2 种方式强制激活伪类：

  • 选中具有伪类的元素，点击 :hov
  • DOM 树右键菜单，选择 Force State

Console

打印日志。左侧可以选择等级，对日志进行分类查看。

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

Pasted image 20220804120719.png

  • 占位符 给日志添加样式，可以突出重要信息
  • %s 字符串， %o 对象， %c 样式， %d 数字

Pasted image 20220804120738.png

  • console.table 具象化地展示 JSON 和 数组数据

Pasted image 20220804120729.png

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

Pasted image 20220804121812.png

Sources

Pasted image 20220804122004.png

四个面板区域：

  1. 页面资源文件目录树

  2. 代码预览区域

  3. Debug 工具栏

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

  4. 断点调试器

Pasted image 20220804122656.png

Break Point 与 Watch

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

Pasted image 20220804123008.png

Scope 与 Call Stack

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

Pasted image 20220804135600.png

前端代码天生具有 “开源” 属性，出于安全考虑，JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用 'a'、'b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？

Pasted image 20220804140610.png

Source Map 可以映射源码。

mappings 字段存储了源文件和 Source Map 的映射

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容
  • 分号，代表换行

一般上线的时候不带 Source Map ，会在监控平台调试。

Network

Pasted image 20220804140856.png

面板区域：

  1. 控制面板

  2. 过滤面板

  3. 概览区域

  4. Request Table 面板

  5. 总结面板

  6. 请求详情面板

Application

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

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

Pasted image 20220804141101.png

点击 Application 下的 Stroage 面板中的 Clear Site Data 可以清除网页的本地存储数据。

Performance

Pasted image 20220804141255.png

面版区域：

  1. 控制面板

  2. 概览面板

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

  3. 线程面板

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

  4. 统计面板

Performance 运用示例

Pasted image 20220804143142.png

解决性能问题：

  • 页面卡帧
  • 查看 FPS 指标
  • 寻找性能瓶颈（红色部分）
  • 优化代码

Lighthouse

Pasted image 20220804141616.png

Pasted image 20220804141627.png

核心 Web 指标：

  • Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5s 内发生。

  • First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为 100ms 或更短。

  • 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 并勾选 Discover USB devices 选项
  4. 手机允许远程调试，并访问调试页面
  5. 电脑点击 inspect 按钮
  6. 进入调试界面

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

VConsole

Pasted image 20220804145530.png

Pasted image 20220804145538.png

  • 日志（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：适合查看、控制网络请求，分析数据
  • Fiddler：与 Charles 类似，适合 Windows 平台
  • spy-debugger：远程调试手机页面，抓包
  • Whisthle：基于 Node 实现的跨平台 Web 调试代理工具

Nodejs 调试

Inspector Protocol + Chrome DevTools

  1. 执行命令 node --inspect=8888 index.js

Pasted image 20220804150408.png

  1. Chrome 浏览器访问服务

Pasted image 20220804150413.png

  1. 点击绿色 node 图标打开 node 调试面板（在 chrome://inspect/#devices 中配置 network target）

Pasted image 20220804150419.png

  1. 在 node 调试面板中使用断点调试

Pasted image 20220804150425.png

Inspector Protocol + VSCode

  • VS Code 点击运行
  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈

Pasted image 20220804150611.png

常用开发调试技巧

线上及时修改 Overrides

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

Pasted image 20220804150707.png

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

Pasted image 20220804150957.png

启用本地 source map

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

Pasted image 20220804151044.png

使用代理工具 Mock 数据

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

小黄鸭调试法

传说中程序大师随身携带者一只小黄鸭，在调试代码的时候会在桌上放这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。

—— 《程序员修炼之道》

调试技巧实践

  • Chrome devtools 各 tab 的运用实践

  • 常用代理工具的实践

avatar
文章
阅读
粉丝