web调试技巧|青训营笔记

平畴
122 阅读2分钟

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

本堂课重点内容

本节课介绍了前端须知的开发调试知识。

详细知识点介绍

世界上第一个bug：计算机上的一只bug。

Chrome DevTools

  • elements
  • console
  • sources
  • memory
  • network
  • application
  • lighthouse
  • performance
  • ...

Elements

点击.cls，动态修改元素类名。

image.png

在下方动态修改元素样式。

image.png

对于伪类，我们可以通过右键中的强制改变状态来调试伪类效果。

image.png

或者选择:hov进行调试。

image.png

我们可以在computed中动态搜索调试想要的效果。

image.png

Console

用来打印日志。

image.png

  • console.table：具象化展示JSON和数组
  • console.dir：通过类似文件树的方式展示对象属性

image.png

image.png

Source

用来展示项目源代码。 包括页面资源文件目录树，代码预览工具和Debug工具栏和断点调试器。 其中Debug工具栏从左到右依次为：

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

image.png

进入断点：

  • debugger
  • 在源代码界面中点击行号

我们可以通过scope查看作用域，通过call stack查看调用栈。

image.png

也可以监听网络请求/DOM元素的断点。

source-map

前端代码天生具有“开源“属性，打包工具会对代码进行压缩和混淆，基本不可阅读，难以调试。

我们可以通过source-map进行映射，将源码与压缩后代码进行映射。

image.png source-map中包含源码，压缩后代码带上source map上线后又不安全了，同时还增大了代码体积。

在实际开发中，项目打包时带上source map，之后将source map上线到另一个平台进行监控，而不是直接和压缩后源码一同上线。

Network

可以通过此界面查看网页发送的网络请求。 可以通过限制界面进行弱网适配。 image.png

对于列表中每个请求，可以点开查看详细信息。

Application

存储相关，不再赘述。

Performance

性能面板，包括控制面板，概览面板，线程面板和统计面板。

image.png

性能问题解决思路：

  • 查看FPS指标
  • 发现性能瓶颈
  • 优化代码

LightHouse

展示的Web指标，并给出优化建议。

image.png

三个核心指标：

  • LCP Largest Contentful Paint：最大内容绘制（最好小于2.5秒）
  • FID First Input Delay：首次输入延迟（最好小于100毫秒）
  • CLS Cumulative Layout Shift：累计布局偏移（应保持在0.1或更小）
avatar
文章
阅读
粉丝