Web调试（PC端+移动端）| 青训营笔记

amstrongzyf
153 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第11天，下面跟我一起看看青训营WEB调试部分讲了什么吧~

1.前端bug的特点

  1. 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等
  2. 多环境：本地开发环境、线上环境
  3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsle等
  4. 多技巧：Console、BreakPoint、sourceMap、代理等

2.Chrome DevTools

  • 动态修改元素和样式

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

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

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

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

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

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

a.选中具有伪类的元素，点击：hov

b.DOM 树右键菜单，选择 Force State

  • Console

1)console.log

2)console.warn

3)console.error

4)console.debug

5)console.info:左侧可以选择等级，对日志进行分类查看

6)console.table:具象化的展示 JSON 和 数组数据

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

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

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

  • Source
  • Performance
  • Network

3.Lighthouse中的一些核心指标：

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

4.移动端H5调试

  • 真机调试

a. IOS

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

b. Android

  1. 使用 USB 数据线将手机与电脑相连
  2. 手机进入开发者模式，勾选 USB 调试，并允许调试
  3. 电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
  4. 手机允许远程调试，并访问调试页面
  5. 电脑点击 inspect 按钮
  6. 进入调试界面
  • VConsole
  1. 日志（Logs）：console.log|info|error|..
  2. 网络（Network）：XMLHttpRequest，Fetch，sendBeacon
  3. 节点（Element）：HTML 节点树
  4. 存储（Storage）：Cookies，LocalStorage，SessionStorage
  5. 手动执行 JS 命令行
  6. 自定义插件
  • 使用代理工具调试

a.原理：

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

b.以 Charles 为例：

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

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

5.NodeJS调试

1）Inspector Protocol + Chrome Devtool

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

2）Inspector Prorocol + VS code

  1. VS Code 点击运行
  2. 添加配置
  3. 启动调试
  4. 添加断点
  5. 查看变量、堆栈

6.常用开发调试技巧

a. 线上即时修改 Overrides

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

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

c.启用本地 source map

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

d.使用代理工具Mock数据

  1. 右击选中要mock数据的接口，选择save response,保存文件到本地

  2. 本地打开保存的文件，编辑想mock的数据并保存

  3. 右键选中第一步的接口,选择Map Local, Local Path选择第二步的文件

avatar
文章
阅读
粉丝