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

江漓Jeffrey
83 阅读3分钟

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

本堂课课程大纲

  1. Web 应用使用 Chrome devTools 调试
  2. 移动端 H5 调试
  3. NodeJs 应用调试
  4. 常用代理工具的使用

Bug与Debug

  1. bug本意虫子（🐛），世界上第一个bug就是虫子🐛阻碍了计算机的运行，debug就是“除除虫”，排查故障、调试。

  2. 前端Debug的特点

    • 多平台 浏览器、Hybrid、 NodeJs、 小程序、桌面应用等.
    • 多环境 本地开发环境、线上环境
    • 多工具 Chrome devTools、Charles、 Spy-Debugger、Whistle、vC Console
    • 多技巧 Console、BreakPoint、 sourceMap、 代理等

PC端：Chrome devTools

动态修改元素和样式

image.png

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

image.png

可以用以下2种方式强制激活伪类：

  1. 选中具有伪类的元素，点击: hov
  2. DOM树右键菜单，选择Force State（强制执行状态）

调试样式的搜索：

image.png

Console

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

image.png

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

image.png

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

1.gif

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

image.png

Sorce Tab

image.png

  1. Break Point 与WatchScope与Call Stack

image.png

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

  1. Scope与Call Stack

    • 展开Scope可以查看作用域列表(包含闭包)
    • 展开Call Stack可以查看当前javaScript代码的调用栈

  2. Source Map

    用于调试压缩代码

NetWork

image.png

功能：

模拟2g、3g等弱网环境；查看加载耗时；查看后端返回结果...

Application

储存相关

image.png

Performance

性能相关

image.png

使用：控制面板点录制，查看统计结果。可模拟CPU、网络不佳的情景

演示demo：googlechrome.github.io/devtools-sa…

页面卡顿→查看FPS指标→寻找性能瓶颈→优化代码

FPS：右上角“三点”->更多工具->渲染->如下图

image.png

红三角表明这里有性能瓶颈：

image.png 点击可查看摘要

image.png

Lighthouse

查看LCP、FID、CLS等指标

课后个人总结

我们在开发中bug不可避免，调试就是我们要去学习和掌握的。本堂课学习到了很多的调试相关的知识，包括PC端、移动端。从此以后面对bug也多了一份勇气😆

avatar
文章
阅读
粉丝