前端必须知道的开发调试知识（上）｜ 青训营笔记

阿皮想当小怪兽
161 阅读6分钟

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

👋本文分为2部分：1. 初识Bug和Debug 2. PC端 Web 调试（Elements | Console | Source | Performance | Network | Application）

Bug 与 Debug

Bug 的产生

第一个Bug

Snipaste_2022-08-02_10-13-07.png

1947年9月9日，葛丽丝·霍普（Grace Hopper）发现了第一个电脑上的bug。当在Mark II计算机上工作时，整个团队都搞不清楚为什么电脑不能正常运作了。经过大家的深度挖掘，发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障（如图所示）。这个团队把错误解除了，并在日记本中记录下了这一事件。也因此，人们逐渐开始用“Bug”（原意为“虫子”）来称呼计算机中的隐错。 —— 维基百科

bug or feature

Snipaste_2022-08-02_10-13-36.png
That's not a bug, it's a feature request.

Node Code ， No Bug

Snipaste_2022-08-02_10-13-45.png
如果不想写bug，最好的方案是不写代码😁

👋虽然bug无处不在但也不用绝望，我们可以用各种各样的方法来消除程序里面的bug（Debug）

前端Debug的特点

1. 多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用…

2. 多环境

本地开发环境、线上环境

3. 多工具

Chrome devTools、Charles、Spy-Debugger、 Whistle、vConsole ...

4. 多技巧

Console、BreakPoint、sourceMap、代理……

Chrome DevTools

😁 Elements | Console | Source | Performance | Network | Application
在浏览器页面按F12键就能看到：

Snipaste_2022-08-02_10-28-34.png

就让我们来看看他们各自有什么功能吧！

Elements——动态修改元素和样式

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

Snipaste_2022-08-02_10-37-26.png

Snipaste_2022-08-02_10-37-30.png 可以用以下2种方式强制激活伪类：

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

Console

左侧可以选择等级，对日志进行分类查看

  • console.log

Snipaste_2022-08-02_10-46-12.png

  • console.warn
  • console.error
  • console.debug
  • console.info

Snipaste_2022-08-02_10-46-09.png

  • console.table

    • 具像化的展示JSON和数组数据

Snipaste_2022-08-02_10-46-16.png

  • console.dir

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

  • 占位符

    • 给日志添加样式，可以突出重要的信息
    • %5：字符串占位符；%o.对象占位符；%c：样式占位符；%d：数字占位符

Sources

Snipaste_2022-08-02_12-01-50.png 区域1：页面资源文件目录树
区域2：代码预览区域
区域3：Debug 工具栏
从左到右依次为

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

区域4：断点调试器

😁接下来介绍右边区域4的内容：Break Point 与 Watch | Scope 与 Call Stack
🤔什么是断点调试呢？

Break Point 与 Watch

断点调试界面：
Snipaste_2022-08-02_12-07-35.png 在你想要暂停代码的地方加上debugger就可以进入调试暂停状态，通过加上日志console.log( )查找问题所在

  • 展开Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标 hover 变量可以查看变量的值
  • 在调试器 Watch 右侧点击+，可以添加对变量的监控，查看该变量的值

补充：除了在代码中加入debugger能够让运行暂停，找到需要暂停的代码，在它的行号那里点一下也能进入暂停状态（如上图，效果和显示蓝色框框一样）

Scope 与 Call Stack

日常用的不是很多，但在关键时刻很有用的

Snipaste_2022-08-02_12-21-52.png

  • 展开Scope 可以查看作用域列表（包含闭包）
  • 闭包可以参考：developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
  • 展开Call Stack可以查看当前javaScript 代码的调用栈
  • 关于调用栈可以参考：developer.mozilla.org/en-US/docs/Glossary/Call_stack

🤔在控制台好像可以看到代码，有没有办法不让别人看到我们的代码呢？
😁可以，将代码压缩和混淆就行，压缩后的代码只有一行，变量使用‘a'、'b'等替换，整体变得不可阅读。

Snipaste_2022-08-02_12-32-22.png

🤔那代码压缩和混淆后我们要怎么调试呢？
😁这时候就要用到前端调试的另一个东西：Source Map

Source Map

一般我们压缩代码使用的是webpack，在打包后的代码会出现webpack.dev.js文件，文件里面就有这样的一段代码：devtool:'source-map'，用于开启Source Map的方法。
压缩混淆后的代码与源码做一个映射，但我们想要找到要调试的地方，来到压缩混淆后的代码结合Source Map找到对应的映射（也就是将源码展现出来）
映射后的代码（举例）：

Snipaste_2022-08-02_12-45-43.png mappings 字段存储了源文件和Source Map 的映射

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

🤔那这样又可以看到源码了，那不就又不安全了吗？
😁在上线的时候我们不会将Source Map文件上传，而是将它上传到监控平台

NetWork

Snipaste_2022-08-02_13-05-20.png

  • 区域1：控制面板（模拟网络环境...）
  • 区域2：过滤面板
  • 区域3：概览区域
  • 区域4：Request Table 面板
  • 区域5：总结面板
  • 区域6：请求详情面板

Application

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

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

Snipaste_2022-08-02_13-13-53.png

点击左侧Application下的Stroage面板中的 Clear Site Data可以清除网页的本地存储数据

Performance

Snipaste_2022-08-02_13-47-19.png 区域1：控制面板
区域2：概览面板

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

区域3：线程面板

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

区域4：统计面板

demo

有官方提供给我们了解性能的一个demo：googlechrome.github.io/devtools-sa…

为了方便我们查看性能指标，浏览器给我们提供了Lighthouse

Lighthouse

Snipaste_2022-08-02_14-04-35.png

核心Web指标

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

avatar
文章
阅读
粉丝