前端开发调试技巧 | 青训营

芦苇269
71 阅读5分钟

1.PC端调试

1.前端 Debug 的特点 ：

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

1.动态修改元素和样式

image.png

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

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

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

image.png

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

%s: 字符串占位符; %: 对象占位符;
%c:样式占位符; %d:数字占位符
📋 提示：左侧可以选择等级，对日志进行分类查看

3.Source Tab

image.png

  1. 区域1：页面资源文件目录树
  2. 区域2：代码预览区域
  3. 区域3：Debug 工具栏
  4. 区域4：断点调试器

3-1 Break Point 与 Watch

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

3-2 Scope 与 Call Stack

  • 展开 Scope 可以查看作用域列表（包含闭包）
  • 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈

📘参考资料：
闭包：developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
调用栈：developer.mozilla.org/en-US/docs/Glossary/Call_stack
3-3 Source Map
mappings 字段存储了源文件和Source Map 的映射

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

🔗映射相关

🤔思考：既然 Source Map 可以映射源码，那压缩后的代码带上 Source Map 上线不就又安全了嘛？
💭 项目上线的时候是不会上source map的，为了代码安全以及减小体积，source map主要应用于监控

4.Network

前言：和后端一起进行开发的时候，出问题了，首先需要定位，看是前端的问题还是后端的，就从浏览器开发者模式的NETWORK的左侧列表找到对应的后端写的接口，查看请求返回的结果，就可以判断错误出现在前端还是后端
image.png

5.Application

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

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

image.png
❗点击左侧 Application 下的 Storage 面板中的 Clear Site Data 可以清楚网页的本地存储数据

6.Performance

image.png
🔗Performance 运用示例
页面卡顿 -->查看 FPS 指标 --> 寻找性能瓶颈 --> 优化代码

7.Lighthhouse

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

2.移动端 H5 调试

ppt:bytedance.feishu.cn/file/boxcnA…

1.真机测试

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

❗没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器

Android
  1. 使用 USB 数据线将手机和电脑连接
  2. 手机进入开发模式，勾选 USB 调试，并允许调试
  3. 电脑打开 Chrome 浏览器，在地址栏输入 chrome://inspect/#devices 选项
  4. 手机允许远程调试，并访问调试页面
  5. 电脑点击 inspect 按钮
  6. 进入调试界面
2.vConsole

image.png

3.使用代理工具调试

原理：

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

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

4.常用代理工具

Charles：适合查看、控制网络请求，分析数据
Fiddler：与 Charles 类似，适合 Windows 平台
spy-debugger：远程调试手机页面，抓包
Whistle：基于 Node 实现的跨平台 Web 调试代理工具

小结：以上的PC端和移动端调试小技巧确实很好用，其实用好调试工具对开发人员来说同样重要，很多时候可以大大提升开发效率。

avatar
文章
阅读
粉丝