前端开发调试 ｜ 青训营笔记

alight0205
107 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第2天。

记录了前端开发过程中的一些调试操作。

一、前端开发调试特点

调试，也叫Debug。有如下特点：

  • 多平台：浏览器、NodeJS、小程序、桌面应用、Hybrid。
  • 多环境：本地开发环境、线上环境。
  • 多工具：Chrom devTools、Charles、Spy-Debugger、Whistle、vConsole...
  • 多技巧：Console、BreakPoint、sourceMap、代理...

二、Chrom devTools

如何打开 Chrom devTools？

  • F12快捷键。
  • 鼠标右键 -> 检查。

1. Elements

  • 在Elements中选中元素 -> 鼠标右键 -> Force state -> 选择伪类。
  • 在Elements中选中元素 -> 选中右侧Styles栏 -> 点击 :hov 选项，可选择伪类。
  • 点击.cls 开启动态修改元素的class。
  • 输入字符串可以动态的给元素添加类名。
  • 勾选/取消类名可以动态的查看类名生效效果。
  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
  • Computed下点击样式里的箭头可以跳转到styles面板中的Css。

2. Console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table *这个用来打印数组非常方便。
  • console.dir 可以以文件树的方式展示dom元素。
  • console.time 作为测试代码开始的节点。
  • console.timeEnd 作为测试代码结束的节点。
  • console.count 获取一段代码执行的次数。

3. Source

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

区域2：代码预览区域

区域3：Debug工具栏，从左到右依次为

  • 暂停(继续)
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活(关闭)所有断点
  • 代码执行异常处自动

区域4：断点调试器

image-20220805225507005

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

image-20220805231215593

Source tag虽然可以进行调试，却需要阅读JavaScript的源码，那么通过webpack等工具打包压缩后的代码该如何调试呢？

可以使用一个工具 souce-map。SouceMap可以映射源码，通过如下配置将 souce-map 配置到项目中。

image-20220806092252975

既然SourceMap 可以映射源码，那压缩后的代码不就又不安全了吗？

通常公司会先带上SourceMap打包项目，将含有SourceMap文件的项目上传到监控平台，然后将SourceMap文件删除，再将不带SourceMap文件的项目部署上线。

4. Network

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

image-20220806095548091

5. Application

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

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

6. Performance

区域1：控制面板。

区域2：概览面板。

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

区域3：线程面板。

  • Frames：帧线程。
  • Main：主线程，负责执行Javascript, 解析HTML /CSS,完成绘制。
  • Raster：Raster线程， 负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板。

image-20220806110446920

运用：

页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码。

示例：官方示例地址

image-20220806110756861

7. Lighthouse

核心WEB指标：

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

image-20220806110857796

总结

如果上述方法还不能解决你所遇到的问题，这里还有一份在江湖中颇负盛名的武林秘籍...

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

--《程序员修炼之道》

avatar
文章
阅读
粉丝