阅读 43

解读Chrome调试工具

简介

Chrome桌面级浏览器,占市场份额的70%左右,它的开发者工具,是每个前端开发工程师必学工具。

主要功能如下

  1. 观察/改变 DOM
  2. 观察/改变 页面样式
  3. 调试JS
  4. 在控制台(console)查看日志/跑脚本
  5. 进行网页性能评估
  6. 监听网络活动

...

当我们按下键盘的F12键后,能看到调试工具中有默认的一些常用调试工具。

image.png

  - Elements 元素面板
  - Console 控制台面板
  - Network 网络面板
  - Sources 源代码面板
  - Performance 性能面板
  - Memory 内存面板
  - Application 应用面板
  - Security 安全面板
  - Lighthouse 性能评估工具
复制代码

下面我们就常用功能面板来介绍下开发者工具的功能和用法

Elements

elements元素面板,如下图所示,分为左侧HTML代码部分,和右侧CSS代码部分。

在左侧,我们能清晰的看到HTML代码的DOM结构,当我们选中某个节点的时候,按下右键会显示出功能操作面板。

2021-05-17_120041.png 主要功能如下:

  • 查看/改变 DOM

  • 查看/改变 CSS

  • 检查/调整页面

console

console控制台面板,主要分为三大部分

  • 顶部 工具栏
  • 左侧 日志类型
  • 右侧 日志的显示/运行区域

image.png

  • 收起/展开侧边栏

动画.gif

  • 清除日志

动画.gif

3.gif

  • 创建实时运行的脚本

1.gif

  • 按日志类型显示日志

2.gif

  • 运行脚本

3.gif

Sources

源代码面板,主要功能查看网页的源代码,包括js/css/html/图片等和js断点调试。

image.png

主要介绍下js断点调试面板

image.png

  • continue:继续执行代码,直到遇到另一个断点

  • step_over:按正常步骤,应该会一行一行的执行相关代码,以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数,点击此按钮将不会进入该函数,而是直接略过,将焦点留在当前函数上。

  • step_into:进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。

  • step_out:在已进入一个函数后,单击此按钮将导致函数定义的其余部分的运行,调试器将将其执行到父函数。

  • step: 仅下一步操作。

  • disable-breakpoints:控制断点开/关的按钮。

  • pause-gray:在异常处产生断点。

Network

image.png

工具栏

image.png 每个按钮对应的功能依照从左到右的顺序:

  • 停止/开启网络监听
  • 清除当前的网络日志
  • 筛选开关,关键词筛选
  • 日志保留,一般用于保留跨域页面跳转前的请求日志
  • 缓存开关,禁止缓存静态资源
  • 网络设置,可模拟WiFi,4G,3G,2G网络环境
  • 上传网络日志,可上传他人的网络日志文件查看
  • 下载网络日志,将当前观测到的网络情况,以文件形式保存下来

网络资源类型

image.png

  • XHR 接口请求
  • JS js文件
  • CSS css文件
  • Img 图片资源
  • Media 媒体资源,一般是音乐视频】
  • Font 自定义字体
  • DOC 文档文件,比较少见
  • WS websocket
  • Manifest manifest文件
  • Other 其他资源

时序图

image.png

顶部是时间,实心绿线代表网络请求,长度越长,代表网络请求间隔越长。

具体网络请求

image.png

左侧是网络请求列表,点击它,会显示右侧具体请求的信息。

  • headers,网络请求信息,包含完整的URL信息,http请求头,响应头,请求参数,请求方式等
  • Preview 接口响应的预览
  • Response 接口响应,和上面区别就是没有被浏览器格式化。本质上是一样的
  • Initiator 来解释请求的发起过程
  • Timing 请求耗时

加载总览

image.png

解释下这张图的意思,该网络日志的检测记录了

  • 101个请求
  • 网络请求传输了221KB
  • 一共有1.5MB的资源,包括js,css,html,等等
  • 耗时1.61S
  • DOMContentLoaded 指的是HTML文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。
  • Load 指的是仅用于检测一个完全加载的页面,页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。

performance

网页性能检测工具,可以用查看网页的FPS,CPU,根据FPS,CPU的异常,借此判断网络是哪方面出现了问题,动画卡顿,还是DOM创建过于频繁,内存泄漏等情况。

image.png

下面演示下如何启动性能检测工具

12.gif

工具栏

image.png

从左到右功能依次是

  • 开启/停止录制
  • 刷新
  • 清除记录
  • 上传性能检测文件
  • 下载观测到的记录,保存为一份文件
  • Screenshots 开启截图
  • Memory 开启/关闭内存观测

简略图

image.png

看右侧有三个指标,FPS,CPU,NET分别代表页面帧率,页面CPU使用率,网络请求。

  • FPS过大时,会显示红色的长条,代表有个长帧。
  • CPU栏
    • 黄色:js的操作所占内存(js代码评估及函数调用)
    • 蓝色:html操作所占的内存(主要是html编译)
    • 紫色:css操作所占的内存(css样式计算等)
    • 灰色:其他操作所占的内存

详情图

image.png

  • network 网络请求,跟network面板的时序图使用差别不大
  • Frames 每一个时间点的页面截图
  • Interactions 动画,主要用来观看页面动效
  • Main js主线程,这个是常用的工具,在这里可以观察到整个周期js执行了哪些函数和方法,调用栈

主要给讲一下main这个火焰图

image.png

  • 从上往下,上一层级任务是下一层级的总集合
  • 函数是从左往右执行的
  • 层数越多,说明调用栈越多

概览图

image.png

  • Summary 监测时间段的总览
    • Loading 加载时间
    • Scripting js执行时间
    • Rendering 渲染时间
    • painting 绘画时间
  • Bottom Up 事件列表,从底到上

当我们在main火焰图里面,选择某一个函数的时候,可以看到任务的执行栈,是从哪里开始到哪里结束的,以及每一步的耗时

image.png

  • Call Tree 函数调用栈

和Bottom-UP类似,当在main选中某一个函数的时候, 这里会自动显示函数栈

image.png

Memory

内存检测工具

image.png

  • Heap snapshot - 用以打印堆快照,堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
  • Allocation instrumentation on timeline - 在时间轴上记录内存信息,随着时间变化记录内存信息
  • Allocation sampling - 内存信息采样,使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销,可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

Application

image.png

用来查看/修改/删除本地缓存,包括

  • localstorage
  • cookies
  • session Storage

image.png 还有

  • IndexDB 本地数据库,允许储存大量数据(加强版LS)
  • WebSQL 本地数据库,仅有Chrome支持

Security

用来查看SSL证书

拿百度首页举例子,左侧是网站来源,右侧网站的证书信息

image.png

Lighthouse

页面性能打分工具

较为简单,直接点击使用即可,会生成一份页面评估报告

image.png

文章分类
前端
文章标签