Web 调试技术 | 青训营笔记

用户9608586346079
93 阅读4分钟

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

一、前端开发调试之 PC 端调试

1.前端 DeBug 的特点

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

2.Console

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

3.Sorce Tab

image-20230205101713176.png

4.Break Point与Vatch

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

5.Scope与Call Stack

6.压缩后的代码如何调试

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

7.Source Map

8.NetWork

image-20230205102450049.png

9.Performance

image-20230205102608420.png

10.Lighthouse

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

二、前端开发调试之移动端调试

1.iOS

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

2.Android

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

3.VConsole

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

4.使用代理工具调试

原理：

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

以Charles为例：

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

5.NodeJs调试 Inspector Protocol Chrome Devtool

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

6.Inspector Protocol +VS Code

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

7.常用开发调试技巧 线上即时修改 Overrides

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

8.启用本地source map

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

9.使用代理工具MoCk数据

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