Web调试技术 | 青训营笔记

this_is_Domi
102 阅读7分钟

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

一、Bug 与 Debug

1. Bug的产生

image-20230207224702631.png

2. 前端Debug的特点

  • 多平台

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

  • 多环境

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

  • 多工具

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

  • 多技巧

    • Console、BreakPoint、sourceMap、代理等

二、Chrome DevTools

Elements | Console | Source | Performance | Network

动态修改元素和样式

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

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

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

    • 点击具体的样式值（字号、颜色、宽度高度等）

      可以进行编辑，浏览器内容区域实时预览

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

    2种方式可以查看指定元素的样式：
    ·面板左上角的定位跟踪箭头可以进行选中
    ·选中元素再右键检查
​
可以用以下2种方式强制激活伪类：
    ·选中具有伪类的元素，点击：hover
    ·DOM树右键菜单，选择Force State

image (96).png

image (97).png

Console

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table 具像化的展示JSON和数组数据

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

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

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

console.time() 计时开始
console.timeEnd() 停止计时并输出时间

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

image (98).png

image (99).png

image (100).png

Score Tab

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

  • 区域2：代码预览区域

  • 区域3：Debug工具栏

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

  • 断点调试器

image - 2023-02-07T221200.906.png

Break Point 与 Watch

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

image - 2023-02-07T221734.466.png

Scope 与 Call Stack

  • 展开 Scope 可以查看作用域列表（包含闭包）

    闭包可以参考
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

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

    关于调用栈可以参考
https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

image - 2023-02-07T222100.800.png

3. 压缩后的代码如何调试？

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

image - 2023-02-07T222322.830.png

Source Map

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

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容
  • 分号，代表换行
映射见:
https://www.murzwin.com/base64vlq.html
​
source Map标准
https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRIpiOFzeOb-_2gc6fAHOKYOk/edit

思考题:既然Source Map可以映射源码，那压缩后的代码带上 Source Map 上线不就又不安全了吗?

source map 混淆后体积无疑会增大，通常地，打包时会进行混淆后，发布上线时不带上映射文件，产生的映射文件上传至调试平台即可

image - 2023-02-07T231728.577.png

NetWork

  • 区域1：控制面板
  • 区域2：过滤面板
  • 区域3：概览面板
  • 区域4：Request Table 面板
  • 区域5：总结面板
  • 区域6：请求详情面板

image - 2023-02-07T223239.617.png

Application

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

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie
点击左侧Application下的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据

image - 2023-02-07T223459.860.png

Performance

  • 区域1：控制面板

  • 区域2：概览面板

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

  • 区域3：线程面板

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

  • 区域4：统计面板

image - 2023-02-07T223935.997.png

Performance 运用示例

  • 页面卡顿
  • 查看FPS指标
  • 寻找性能瓶颈
  • 代码优化
https://googlechrome.github.io/devtools-samples/jank/

可以打开开发者工具设置中 > More tools > Rendering > 可以查看FPS 

获取offsetTop会导致浏览器的重绘和重排而造成卡顿

image - 2023-02-07T224123.052.png

Lighthouse

image - 2023-02-07T224344.553.png

核心Web指标

  • Largest Contentful Paint (LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
  • First Input Delay (FID)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短
  • Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉隐定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少

image - 2023-02-07T224338.642.png

三、移动端 H5 调试

1. 真机调试

iOS

  • 使用 Lightning 数据线将 iPhone 与 Mac相连
  • iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启Web检查器)
  • iPhone 使用 Safari 浏览器打开要调试的页面
  • Mac 打开 Safari 浏览器调试(菜单栏 -> 开发 -> iPhone设备名 -> 选择调试页面)
  • 在弹出的 Safari Developer Tools 中调试
没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器

Android

  • 使用USB数据线将手机与电脑相连
  • 手机进入开发者模式，勾选 USB调试，并允许调试
  • 电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices选项
  • 手机允许远程调试，并访问调试页面
  • 电脑点击 inspect 按钮
  • 进入调试界面
直接使用手机扫码查看，体验更佳

2. VConsole

  • 日志(Logs)：console. log | info | error | ...
  • 网络(Network)：XMLHttpRequest,Fetch, sendBeacon
  • 节点(Element)：HTML节点树
  • 存储(Storage)：Cookies，Localstorage, sessionstorage
  • 手动执行JS命令行
  • 自定义插件

image.jpeg

image (1).jpeg

3. 使用代理工具调试

原理:

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

以Charles为例:

  • 安装Charles
  • 查看电脑 IP 和端口
  • 将IP、端口号填入手机 HTTP 代理
  • Charles 允许授权
  • 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
  • 手机访问开发环境页面
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书

4. 常用代理工具

  • Charles：

    • 适合查看、控制网络请求，分析数据

image - 2023-02-07T235459.376.png

  • Fiddler

    • 与 Charles 类似，适合 windows 平台

image - 2023-02-07T235505.408.png

  • spy-debugger

    • 远程调试手机页面，抓包

image - 2023-02-07T235509.163.png

  • Whistle

    • 基于 Node 实现的跨平台 Web 调试代理工具

image - 2023-02-07T235511.807.png

四、NodeJS调试

1. lnspector Protocol + Chrome Devtool

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

  • chrome浏览器访问服务

  • 点击绿色 node 图标打开 node 调试面板

    (在chrome://inspect/#tdevices中配置network target)

  • 在 node 调试面板中使用断点调试

image - 2023-02-08T000241.154.png

image - 2023-02-08T000247.563.png

image - 2023-02-08T000250.382.png

image - 2023-02-08T000252.735.png

2. lnspector Protocol + VS Code

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

image - 2023-02-08T000538.587.png

五、常用开发调试技巧

1. 线上即时修改 Overrides

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

image - 2023-02-08T000720.008.png

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

image-20230208000808243.png

3. 启用本地source map

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

image - 2023-02-08T000937.132.png

4. 使用代理工具Mock 数据

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

image - 2023-02-08T001024.743.png

5. 小黄鸭调试大法

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

image - 2023-02-08T001128.906.png

avatar
文章
阅读
粉丝