前端必须知道的开发调试知识 | 青训营笔记

xcdval
90 阅读4分钟

前端必须知道的开发调试知识 | 青训营笔记

这是我参与【第四届青训营】笔记创作活动的第6天

一、Bug与Debug

Bug

Bug是在应用程序投入生产之前发现的错误。导致程序工作不佳、生产错误结果或崩溃的编程错误。导致程序故障的软件或硬件上的错误

Debug
  • 多平台

浏览器、Hybrid、Node.js、小程序、桌面应用...

  • 多环境

本地开发环境、线上环境

  • 多工具

chrome devTools、charles、spy-Debugger、Whistle、vConsole...

  • 多技巧

console、BreakPoint、sourceMap、代理...

二、Chrome DevTools

内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

  • Elements

    在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑

  • Console

    一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互

  • Sources

    Sources 面板主要用来调试页面中的 JavaScript -** Network**：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。

  • Performance

    在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

  • Memory

    Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。

  • Application

    记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。

  • Security

    用于检测当面页面的安全性。

  • Lighthouse

    谷歌网页性能分析工具。

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

ps：两种强制激活伪类的方式

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

image-20220806154414930

image-20220806154414930.png

Console
  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table

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

  • console.dir

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

  • 占位符

给日志添加样式，可以突出重要的信息

%s：字符串占位符；

%o：对象占位符；

%c：样式占位符；

%d：数字占位符

Source Tab

image-20220806155409122.png Break point与Watch

image-20220806160054318.png

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

Scope与Call Stack

Source Map

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

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

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

NetWork

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

image-20220806161654244.png

Application

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

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

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

image-20220806161947132.png

Lighthouse

网页性能分析工具

Web核心指标：

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

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

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

image-20220806163818042.png

三、小结

这节课主要学习了前端开发调试的基础知识和chrome自带的调试工具，通过学习，掌握了动态调样式和通过断点等方法来debug。

avatar
文章
阅读
粉丝