前端开发调试 | 青训营笔记

XaiKiv
61 阅读4分钟

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

在程序员的世界中， BUG 一词令人闻风丧胆。跟随课程将围绕前端开发中所遇见的 BUG 出发，了解作为一名合格的前端开发人员，我们应该掌握哪些开发调试知识。

一、PC 端调试：⭐⭐

动态修改元素和样式：

  • 点击 .cls 开启动态修改元素的 class 。
  • 输入字符串可以动态的给元素添加类名。
  • 勾选 / 取消类名可以动态的查看类名生效效果。
  • 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
  • Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则。

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

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

Console

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

Sorce Tab

image.png

  • 区域①：页面资源文件目录树；
  • 区域②：代码预览区域；
  • 区域③：Debug 工具栏。从左到右依次为;
    • 暂停（继续）
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活（关闭）所有断点
    • 代码执行异常处自动
  • 区域④：断点调试器

Break Point 与 Watch

  • 使用关键字 debugger 或代码预览区域的行号可以设置断点；
  • 执行到断点处时代码暂停执行；
  • 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点；
  • 暂停状态下，鼠标 hover 变量可以查看变量的值。

NetWork

image.png

  • 区域①：控制面板
  • 区域②：过滤面板
  • 区域③：概览区域
  • 区域④：Request Table 面板
  • 区域⑤：总结面板
  • 区域⑥：请求详情面板

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

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

Performance

image.png

  • 区域①：控制面板
  • 区域②：概览面板
    • FPS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费时间
  • 区域③：线程面板
    • Frames：帧线程
    • Main：主线程，负责执行 Javascript ，解析 HTML / CSS , 完成绘制。
  • 区域④：统计面板

二、移动端调试：

  • iOS
  1. 使用 Lightning 数据线将 iPhone 与 Mac 相连。
  2. iPhone 开启 Web 检查器（设置 → Safari → 高级 → 开启 Web 检查器)。
  3. iphone 使用 Safari 浏览器调试的页面。
  4. Mac 打开 Safari 浏览器调试(菜单栏 → 开发 → iPhone 设备名 → 选择调试页面）。
  5. 在弹出的 Safari Developer Tools 中调试。
  • Android
  1. 使用 USB 数据线将手机与电脑相连。
  2. 手机进入开发者模式，勾选 USB 调试，并允许调试。
  3. 电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项。
  4. 手机允许远程调试，并访问调试页面。
  5. 电脑点击 inspect 按钮。
  6. 进入调试界面。

VConsole

  • 日志(Logs) : console.log | infolerror \ ..
  • 网络(Network): XMLHttpRequest,Fetch, sendBeacon
  • 节点(Element): HTML节点树
  • 存储(Storage) : Cookies, LocalStorage,SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

代理工具调试

原理:

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

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

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

常用代理工具：

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

常用开发调试技巧：

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

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

image.png

启用本地 Source Map

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

使用代理工具 Mock 数据

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

结尾

综上，今天掌握了前端开发调试的接口内容数据，又是充实的一天哈~😊

avatar
文章
阅读
粉丝