开发调试之路|青训营笔记

JayZzz
90 阅读4分钟

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

今天课程学习的是前端必须知道的开发调试知识内容，我们知道，在我们开发写代码的时候，总不可能一帆风顺，难免会有些意料之外或者奇奇怪怪的bug，面对这些问题的时候，有一套完整的解决bug体系内容显得尤为重要，下面一起来学习一下解决bug和调试程序的知识吧！

Bug和Debug

Bug是在软件运行中因为程序代码本身有错误而造成的功能不正常、体验不佳、数据丢失、非正常中断、死机等现象。

Debug就是解决上述问题的过程，也可以称为调试过程。

前端Debug的特点

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

Chrome DevTools

Chrome DevTools 是谷歌浏览器的开发调试工具

下面我们来介绍一下有什么功能吧！

Elements

image-20220805115207269

可以看到HTML里的元素和样式，通过点击选取来调试更改样式

例子：

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

Console

Console是一个控制台，用来展示打印日志的地方。

image-20220805115843220

  1. console.log 直接打印内容，字体为白色
  2. console.warn 打印警告内容，字体为黄色
  3. console.error 打印错误内容，字体为红色
  4. console.debug 打印调试内容，字体为蓝色
  5. console.info 打印内容，字体为白色
  1. console.table 可以具象化地展示JSON 和 数组数据

image-20220805120216175

  1. console.dir 可以通过类似文件树的方式展示对象的属性

Sorce Tab

进入调试的方法有 debugger 以及 设置断点

debugger调试

通过Sources中的代码来进行debug调试。

在所需代码段中添加debugger后进行输出调试，一步步查找问题所在。

image-20220805120500239

设置断点调试

在所需设置断点的行数设置断点，后进行运行调试即可

image-20220805121249300

与此同时，在我们调试的过程中，我们还能看到通过Scope看到作用域列表以及通过Call Stack看到当前的调用栈image-20220805135335729

调试压缩后的代码

在前端代码的开发中，为了安全问题，我们一般会打包压缩好代码再进行上线，压缩后的代码只有一行，变量使用'a','b'等替换，整体变得不可阅读，调试变得困难。

在这种情况下，我们用Source Map来进行处理

Source Map进行映射来查找源文件的代码image-20220805140003358

Network

一般用来查看接口网络请求

image-20220805140314946

Application

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

例如 ：

  • Local Storage：一个可被用于访问当前源（ origin ）的本地存储空间的 Storage 对象。
  • Session Storage：它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
  • IndexedDB ： IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据
  • Web SQL：
  • Cookie：是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上

Performance

Performance面板和网页性能相关的，可以分析该页面的性能参数以及查看各任务的运行时间

image-20220805141152614

Lighthouse

核心Web指标

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

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

CLS（Cumulative Layout Shift）：累积布局偏移，测量视觉稳定性，为了提供良好的用户体验，页面的CLS应保持在0.1或者更少

移动端H5调试

1-真机调试

通过数据线将手机和电脑连接在一起，手机进入开发者模式，进行调试，用电脑浏览器进行调试。

image-20220805142221534

2-VConsole

image-20220805142406301

3-使用代理工具调试

image-20220805142426226


在程序开发的过程遇到问题，先尝试自己查找问题的根源，再去寻找解决方法，可以询问有经验的人员以及通过浏览器查询，要善于运用知识，多思考！继续加油！！

avatar
文章
阅读
粉丝