前端开发调试-PC端 ｜ 青训营

xio
114 阅读4分钟

01 Bug 与 Debug

Bug的产生

1947年9月，First Bug

前端 Debug 的特点

  1. 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等。

  2. 多环境：本地开发环境、线上环境。

  3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……

  4. 多技巧：Console、BreakPoint、sourceMap、代理等。

02 Chrome DevTools

Elements、Console、Source、Performance、Network

  1. Elements：动态修改元素和样式

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

可以用以下2种方式强制激活伪类（某个状态下的样式）：

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

  1. Console：展示日志

不同类型的值输出的颜色是不一样的。

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table

具象化地展示 JSON 和数组数据

  • console.dir

通过类似文件树的方式展示对象的

  • 占位符

给日志添加样式，可以突出重要的内容

%s字符串占位符
%o对象占位符
%c样式占位符
%d数字占位符
  • console.time

计算循环十万次所需要的毫秒数。

console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上。

  1. Source：展示项目源代码

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

区域2：代码预览区域

区域3：Debug 工具栏

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

区域4：断点调试器

Break Point 与 Watch

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

Scope 与 Call Stack

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

developer.mozilla.org/en-US/docs/…

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

developer.mozilla.org/en-US/docs/…

压缩后的代码如何调试

前端代码天生具有“开源”属性。

出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’、‘b’等替换，整体变得不可阅读。

工具

webpack、UglifyJs、terser

Source Map

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

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

  1. Network

区域1：控制面板

区域2：过滤面板

区域3：概览区域

区域4：Request Table 面板

区域5：总结面板

区域6：请求详情面板

串行执行 & 并行 执行

找到接口

  1. Application：浏览器存储相关

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

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

点击左侧Application-Storage面板-Clear Site Data：清除本地存储数据。

  1. Performance

区域1：控制面板

区域2：概览面板

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

区域3：线程面板

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

区域4：统计面板

  1. Lighthouse

核心Web指标

Largest Contentful Paint (LCP): 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。

web.dev/lcp/

First Input Delay (FID): 首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FIID 应为100 毫秒或更短。

web.dev/fid/

Cumulative Layout shift (CLS) : 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1.或更少。

web.dev/cls/

03 常用开发调试技巧

  1. 线上即时修改Overrides

1.打开 Sources 面板下的 Overrides。

2.点击 Select folders for Overrides。选择一个本地的空文件夹目录。

3.允许授权。

4.在 page 中修改代码，修改完成后 command +s 保存。

5.打开 devTools ，点击右上角的三个小点- More tools - Changes，就能看到所有修改了。

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

  1. 启动本地的 Source Map

线上不存在 Source Map 时，

可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。

  1. 使用代理工具 Mock 数据

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

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

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

  1. 小黄鸭调试大法

avatar
文章
阅读
粉丝