前端开发必备知识 — 调试工具

2023-03-08 下午前端 56 次浏览暂无评论

前言

本文主要介绍了前端开发在chrome devtools中的调试方式。

一、前端开发调试特点

调试,也叫Debug。有如下特点:

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

二、Chrome devTools

如何打开 Chrome devTools?

  • F12快捷键。
  • 鼠标右键 -> 检查。

1. Elements

  • 在Elements中选中元素 -> 鼠标右键 -> Force state -> 选择伪类。

  • 在Elements中选中元素 -> 选中右侧Styles栏 -> 点击 :hov 选项,可选择伪类。

  • 点击.cls 开启动态修改元素的class。

  • 输入字符串可以动态的给元素添加类名。

  • 勾选/取消类名可以动态的查看类名生效效果。

  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览。

  • Computed下点击样式里的箭头可以跳转到styles面板中的Css。

2. Console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table *这个用来打印数组非常方便。
  • console.dir 可以以文件树的方式展示dom元素。
  • console.time 作为测试代码开始的节点。
  • console.timeEnd 作为测试代码结束的节点。
  • console.count 获取一段代码执行的次数。

3. Source

区域1:页面资源文件目录树

区域2:代码预览区域

区域3:Debug工具栏,从左到右依次为

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

区域4:断点调试器

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220805225507005.png" alt="image-20220805225507005" style="zoom: 80%;" />
  • 使用关键字debugger或代码预览区域的行号可以设置断点。
  • 执行到断点处时代码暂停执行。
  • 展开Breakpoints列表可以查看断点列表,勾选/取消可以激活/禁用对应断点。
  • 暂停状态下,鼠标hover变量可以查看变量的值。
  • 在调试器Watch右侧点击 +,可以添加对变量的监控,查看该变量的值。
  • 展开Scope可以查看作用域列表(包含闭包)。
  • 展开Call Stack可以查看当前javaScript代码的调用栈。
<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220805231215593.png" alt="image-20220805231215593" style="zoom:80%;" />

Source tag虽然可以进行调试,却需要阅读JavaScript的源码,那么通过webpack等工具打包压缩后的代码该如何调试呢?

可以使用一个工具 souce-map。SouceMap可以映射源码,通过如下配置将 souce-map 配置到项目中。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806092252975.png" alt="image-20220806092252975" style="zoom: 50%;" />

既然SourceMap 可以映射源码,那压缩后的代码不就又不安全了吗?

通常公司会先带上SourceMap打包项目,将含有SourceMap文件的项目上传到监控平台,然后将SourceMap文件删除,再将不带SourceMap文件的项目部署上线。

4. Network

  • 区域1:控制面板
  • 区域2:过滤面板
  • 区域3:概览区域
  • 区域4: Request Table面板
  • 区域5:总结面板
  • 区域6:请求详情面板
<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806095548091.png" alt="image-20220806095548091" style="zoom: 80%;" />

5. Application

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

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

6. Performance

区域1:控制面板。

区域2:概览面板。

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

区域3:线程面板。

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

区域4:统计面板。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110446920.png" alt="image-20220806110446920" style="zoom:80%;" />

运用:

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

示例:[官方示例地址](https://googlechrome.github.io/ devtools -samples/jank/)

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110756861.png" alt="image-20220806110756861" style="zoom:80%;" />

7. Lighthouse

核心WEB指标:

  • Largest Contentful Paint (LCP) :最大内容绘制,测量加载性能。为了提供良好的用户体验,LCP应在页面首次开始加载后的2.5秒内发生。
  • First Input Delay (FID) :首次输入延迟,测量交互性。为了提供良好的用户体验,页面的FID应为100毫秒或更短。
  • Cumulative Layout Shift (CLS) :累积布局偏移,测量视觉稳定性。为了提供良好的用户体验,面的CLS应保持在0.1.或更少。
<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110857796.png" alt="image-20220806110857796" style="zoom:80%;" />

总结

如果上述方法还不能解决你所遇到的问题,这里还有一份在江湖中颇负盛名的武林秘籍...

传说中程序大师随身携带一只小黄鸭,在调试代码的时候会在桌上放上这只小黄鸭,然后详细地向鸭子解释每行代码,然后很快就将问题定位修复了。

​ --《程序员修炼之道》


上一篇:Git 常用命令

下一篇:Axios 使用手册

目录

一、前端开发调试特点
二、Chrome devTools
1. Elements
2. Console
3. Source
4. Network
5. Application
6. Performance
7. Lighthouse
总结
ICP备案号:鲁ICP备2020040322号