Web 调试技术|青训营笔记

星倦756
91 阅读4分钟

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

一、Bug与Debug

前端Debug的特点

  • 多平合

    • 浏览器、Hybrid、Node]s、小程序、桌面应用等

  • 多环境

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

  • 多工具

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

  • 多技巧

    • Console、BreakPoint、sourceMap、代理等

二、Chrome DevTools

动态修改元素和样式

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

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

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

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

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

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

  • 选中具有伪类的元素，点击：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

区域1: 页面资源文件目录树

区域2: 代码预览区域

区域3: Debug 工具栏从左到右依次为

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

区域4: 断点调试器

BreakPoints Watch

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

image-20230205152041129.png

Scope 与 Call Stack

展开 Scope 可以查看作用域列表(包含闭包)

展开 Call Stack 可以查看当前javaScript 代码的调用栈

压缩后的代码如何调试

出于安全考虑，上线之前js会被压缩，压缩后只有一行，变量使用'a','b'替换

  • source Map

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

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

NetWork

image-20230205153134691.png

Application

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

  • Local Storage
  • Session Storage
  • Indexed DB
  • Web SQL
  • Cookie

三、移动端 H5 调试

真机调试

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）
  • 网络（Network）
  • 节点（Element）
  • 存储（Storage）
  • 手动执行JS 命令行
  • 自定义插件

使用代理工具调试

原理

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

以 Charles 为例

1）安装 Charles

2）查看电脑IP 和 端口

3)将IP、端口号填入手机 HTTP 代理

4)Charles 允许授权

5)使用 SwitchHosts!软件给 Mac 电脑配 Hosts

6)手机访问开发环境页面

image-20230205153646240.png

四、Nodejs调试

  • Inspector Protocol + Chrome Devtool
  • Inspector Protocol + VS Code

五、常用开发调试技巧

线上即时修改Overrides

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

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

image-20230205153736506.png

启用本地-source map

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

image-20230205154125827.png

使用代理工具 Mock 数据

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