文章目录

1.简介

2. Elements

3. Console

4. Sources

5. Network

6. performances

7. Memory内存检测工具

8. Application

9. Security

10. Lighthouse

1. 简介

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

主要功能如下

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

如何唤起工具

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

image.png

功能划分

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

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

2. Elements

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

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

HTML代码区

image.png

CSS代码区

styles

css编辑面板，可以通过点击样式属性直接修改，页面会对应变化

image.png

computed

CSS盒子原型，能看到BOX的大小边界，以及各种属性，不可编辑

image.png

layout

只能用来看flex布局和grid布局的盒子

image.png

Event Listeners

事件监听器，能看到选中的DOM节点上，有哪些事件监听

image.png

3. Console

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

• 顶部 工具栏
• 左侧 日志类型

• 右侧 日志的显示/运行区域

  
  
  image.png

工具栏

• 收起/展开侧边栏

  
  
  image.png

• 清除日志

  
  
  image.png

• 创建实时运行的脚本

image

• 按日志类型显示日志

image

• 运行脚本

image

4. Sources

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

image.png

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

image

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

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

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

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

• step: 仅下一步操作。

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

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

5. Network

image.png

工具栏

image.png

每个按钮对应的功能依照从左到右的顺序：

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

网络资源类型

image

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

时序图

image

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

具体网络请求

image

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

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

加载总览

image

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

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

6.Performance

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

image.png

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

image.png

工具栏

image

从左到右功能依次是

• 开启/停止录制
• 刷新
• 清除记录
• 上传性能检测文件
• 下载观测到的记录，保存为一份文件
• 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

• Summary 监测时间段的总览

• Loading 加载时间

• Scripting js执行时间

• Rendering 渲染时间

• painting 绘画时间

• Bottom Up 事件列表，从底到上
  当我们在main火焰图里面，选择某一个函数的时候，可以看到任务的执行栈，是从哪里开始到哪里结束的，以及每一步的耗时

image.png

• Call Tree 函数调用栈
  和Bottom-UP类似，当在main选中某一个函数的时候， 这里会自动显示函数栈

image

7.Memory内存检测工具

image

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

8.Application

image

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

• localstorage
• cookies
• session Storage

image.png

还有

• IndexDB 本地数据库，允许储存大量数据（加强版LS）
• WebSQL 本地数据库，仅有Chrome支持

9.Security

用来查看SSL证书

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

image

10.Lighthouse

页面性能打分工具

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

image