前端开发调试 | 字节青训营笔记

linht
340 阅读8分钟

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

前端开发调试（基础原理篇）

1.BUG（软件缺陷）

什么是Bug（软件缺陷）？

  • 产品说明书中规定要做的事情，而软件没有实现。
  • 产品说明书中规定不要做的事情，而软件确实现了。
  • 产品说明书中没有提到过的事情，而软件确实现了。
  • 产品说明书中没有提到但是必须要做的事情，软件确没有实现。
  • 软件很难理解，很难使用，速度超慢，测试人员站在最终用户的角度看到的问题是平常的但不是正确的。

常见Bug分类：

  • 功能错误：功能上的错误性bug。
  • 代码错误：一般很少出现，通常在自测时出现（对白盒测试、自测的比较适合）
  • 内容相关：业务逻辑方面以及业务描述等相关问题
  • 表单相关：表单逻辑、样式、内容问题
  • 用户界面：UI表现，包括对话框样式和文字描述问题
  • 需求变动：原有的需求基础上的更改
  • 新增需求：会议上提出的新需求，非正式会议提出的不属于该项
  • 设计文档：数据库设计文档、概要/详细设计文档描述有问题
  • 建议：功能已满足但待改善，属于改良性建议
  • 配置相关：如web服务器或者数据库服务器配置等问题
  • 安装部署：项目部署时出现的错误，可能不是程序本身的问题而是工具本身和人为因素引起
  • 安全相关：加密和水印等安全信息
  • 性能压力：负载、压力测试不通过
  • 标准规范：根据国际标准或者公司内部制定的某标准，未符合标准
  • 测试脚本：如用工具LR编写并执行脚本进行测试，脚本错误
  • 事务跟踪：产品缺陷/bug跟踪（Defect/bug Tracking）工作任务跟踪（Task Tracking）

原文链接blog.csdn.net/m0_46482126…

2.Debug

Debug：消除故障或排除程序故障。

Debug特点：

  • 多平台：如浏览器、NodeJs、Hybrid、小程序等。
  • 多环境：本地开发环境、线上环境。
  • 多工具：Chrome、devTools、Charles、Spy-Debugger等。
  • 多技巧：Console、BreakPoint、sourceMap、代理等。

3.Chrome DevTools

Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

DevTools功能（9个功能组）：

  • Elements：在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
  • Console：一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
  • Sources：Sources 面板主要用来调试页面中的 JavaScript -** Network**：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。
  • Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。
  • Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。
  • Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。
  • Security：用于检测当面页面的安全性。
  • Lighthouse：谷歌网页性能分析工具。

官方文档：developers.google.com/web/tools/c…

3.1-console

console也被称为日志。

console功能指令：

  • console.log：控制台显示信息，可以用来取代alert或document.write()。

  • console.warn：显示警告提示信息。

  • console.error：显示错误提示信息。

  • console.debug：显示除错信息。

  • console.info：显示一般信息。

  • console.table：具象化的展示JSON和数组数据。

  • console.dir：通过类型文件树的方式展示对象的属性。

  • 占位符：给日志添加样式，可以突出重要信息。（如：%s：字符串占位符、%o：对象占位符、%c：样式占位符、%d：数字占位符。）

如下图： 1659605492805.png

3.2-动态修改元素和样式

动态修改元素和样式方法：

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

如下图： 1659606157435.png

1659606285790.png

同时可以用以下两种方式强制激活伪类

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

3.3-Sources

使用Chorme控制台Sources面板：

  • 查看文件
  • 编辑 Css 和 JavaScript。
  • 创建和保存 JavaScript 的代码段，您可以在任何页面上运行此代码段。 代码段与小书签相似。
  • 调试 JavaScript。
  • 设置工作区，以将您在 DevTools 中作出的更改保存到文件系统的代码中。

3.3.1-Sources-Tab

Sources面板主要分为4个部分：

15bbcec383a4d4ab4e0202fcd91a9b3.jpg

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

  • 区域2：代码预览区域

  • 区域3：Debug工具栏，从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所以断点、代码执行异常处自动

  • 区域4：断点调试器

3.3.2-断点与监视

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

如下图： 1659608103876.png

3.3.3-作用域和调用堆栈

展开作用域可以查看作用域列表（包括闭包）

闭包可以参考：developer.mozilla.org/en-US/docs/…

展开调用堆栈可以查看当前JavaScript代码的调用栈

关于调用栈可以参考 developer.mozilla.org/en-US/docs/…

3.3.4-Source Map

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

特点

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

映射解析器：www.murzwin.com/base64vlq.h…

Sources Map标准可以参考：

1659609198558.png

3.4-NetWork

Network 网络面板主要用来确认资源下载情况以及查看资源的属性信息网络上的请求都是对资源的请求，CSS、JS以及HTML页面等。

Network面板主要分为6部分（如下图）： image.png

  • 区域1：控制面板

  • 区域2：过滤面板

  • 区域3：概览区域

  • 区域4：Request Table面板

  • 区域5：总结面板

  • 区域6：请求详情面板

3.5-Application

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

  • local Storage（本地存储）
  • Session Storage（会话存储）
  • IndexedDB
  • Web SQL
  • Cookie

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

3.6-Performance

在 Performance 面板可以查看页面加载过程中的详细信息。可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

Performance面板主要分为4部分（如下图）：

fc7fc0e0cce2fd6672cb5f64cdcb73a.jpg

  • 区域1：控制面板

  • 区域2：概览面板（FPS：每秒帧数）、（CPU：处理各个任务花费的时间）、（NET：各个请求花费时间）

  • 区域3：线程面板（Frames：帧线程）、（Main：主线程、负责执行Javascript，解析HTML/CSS，完全绘制）、（Raster：Raster线程，负责完成某个layer或者某些块的绘制）

  • 区域4：统计面板

Performance运用过程： 页面卡顿=>查看FPS指标=>寻找性能瓶颈=>优化代码

3.7-Lighthouse

Lighthouse是网页性能分析工具。 Web核心指标：

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

如下图： 0287f0a0355d265fd4b24643a4746c2.png

4.个人总结

这是在青训营学习前端的第8天，今天主要讲的是前端开发调试的一些基础知识，我主要学习了如何通过浏览器自带的调试工具来debug。对于我来说，通过今天的学习，我学会了如何动态的调样式，如何通过断点等方法来排除错误的等一些调试方法，然后我根据老师上课所说的知识+课外查询的资料整理成了以上这篇文章，主要针对前端涉及的开发调试的知识，让大家更好的掌握使用调试方法从而更好的写代码，一起从底层基础开始学习，希望能帮助到大家，谢谢！

avatar
文章
阅读
粉丝