前端开发调试 | 青训营

ly_fashion
598 阅读4分钟

前言

不知道开发调试的程序员不是一个好的程序员,下面讲讲常用的开发调试技巧.

浏览器调试

(谷歌开发者工具为例)

Element(元素)

在网页中如何选中元素?

  1. 点击小箭头可以
  2. 直接在该元素上鼠标右键选择检查

image.png

当要保持某个元素的伪类状态如:hover时,可进行如下操作(2种方案)

image.png

搜索想要调试的样式类名

image.png

Console(控制台)

console家族:

console.log('log')
console.warn('warn')
console.error('error')
console.debug('debug')
console.info('info')
// 
console.log('%s %o,%c%s', 'hello', { name: 'hi', age: 12 }, 'font-size: 24px; color: pink', 'selfStyle log')

效果图:

image.png

其中最后一行代码的'%s %o,%c%s'是占位符,可以给日志添加样式,以突出重要信息

%s:字符串占位符;%对象占位符;%c样式占位符;%d:数字占位符

const obj = [
  {
    name: '张三',
    age: 18,
    sex: '男'
  },
  {
    name: '李四',
    age: 28,
    sex: '男'
  },
  {
    name: '王五',
    age: 180,
    sex: '男'
  }
]

// 具象化的展示JSON和数组数据
console.table(obj)

// 通过类似文件树的方式展示对象的属性
console.dir(obj)

效果:

image.png

image.png

Source(源代码)

tab页面;

  1. 页面资源文件目录树

  2. 代码预览区域

  3. Debug工具栏(从左往右依次为)

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

  4. 断点调试器

image.png

断点调试:

使用关键字debugger 或代码预览区域的行号可以设置断点

执行到断点处时代码暂停执行

展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

暂停状态下，鼠标hover变量可以查看变量的值

在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

image.png

闭包(Scope)和调用栈(Call Stall)

image.png

Network(网络)

区域1:控制面板

区域2:过滤面板

区域3:概览区域

区域4: Request Table面板

区域5:总结面板

区域6:请求详情面板

image.png

Application(应用)

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

本地存储:

  1. Local Storage
  2. session Storage
  3. IndexedDB
  4. Web SQL
  5. Cookie

关于它们的区别用法我会在另一章节中讲到!

image.png

Performance(性能)

区域:控制面板

区域2:概览面板

  • FPS:每秒帧数
  • CPU:处理各个任务花费的时间
  • NET:各个请求花费时间

区域3∶线程面板

  • Frames:帧线程
  • Main:主线程，负责执行Javascript,解析HTML/CSS,完成绘制
  • Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4:统计面板

image.png

Lighthouse(灯塔)

Lighthouse是一个由Google开发的自动化工具，可以帮助评估web应用的质量。它执行一系列针对不同方面的测试，包括性能、可访问性、最佳实践等，并生成综合报告。

使用Lighthouse:

  1. 打开Chrome开发者工具
  2. 选择Lighthouse选项卡
  3. 点击Generate report生成报告

Lighthouse将生成一个综合报告，其中包含各种性能指标和建议。

image.png

核心Web指标:

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

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

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

Debugger

除了谷歌开发者工具，大多数浏览器还提供了内置的调试器。调试器帮助开发人员诊断和解决JavaScript错误，以及对代码进行单步调试。

使用调试器:

  1. 打开浏览器开发者工具
  2. 选择调试器选项卡
  3. 找到您想要调试的JavaScript文件
  4. 在要调试的行上添加断点
  5. 刷新页面并开始调试

调试器将暂停代码执行，并允许您检查变量、调用堆栈和其他调试信息。

总结

浏览器开发工具是每个前端开发人员必须掌握的工具之一。通过使用它们，您可以轻松地诊断和解决问题，使您的应用程序更加可靠和高效。

avatar
文章
阅读
粉丝