开发者工具

截图

命令行面板=>screenshot

j4HQ0O.png

动画

j4HMnK.png

拾色器

j4HuX6.png

在线调伪类样式

j4HVh9.png

查看元素绑定事件

j4Hn6x.png

全局搜索代码

j4HepR.png

Rendering 实时检测网页变化

下面是比较实用的功能：

  1. Paint flashing，实时高亮重绘区域（绿色）。
  2. Layout Shift Regions，实时高亮重排（重新布局）区域（蓝色）。
  3. Layer borders，将合成层用边框标出来（橙色、橄榄色、青色）。

j4Hm11.png

存储

j4HEtJ.png

NetWork

qeLtoQ.png

瀑布图是什么呢？

瀑布图就是上方图片后面的waterfall纵列

瀑布图是一个级联图, 展示了浏览器如何加载资源并渲染成网页. 图中的每一行都是一次单独的浏览器请求. 这个图越长, 说明加载网页过程中所发的请求越多. 每一行的宽度, 代表浏览器发出请求并下载该资源的过程中所耗费的时间。它的侧重点在于分析网路链路

瀑布图颜色说明：

  • DNS Lookup [深绿色] - 在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段。
  • Initial Connection [橙色] - 在浏览器发送请求之前, 必须建立TCP连接. 这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题(后边细说)。
  • SSL/TLS Negotiation [紫色] - 如果你的页面是通过SSL/TLS这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程。目前Google将HTTPS作为其搜索排名因素 之一, SSL/TLS 协商的使用变得越来越普遍了。
  • Time To First Byte (TTFB) [绿色] - TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间。 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN。
  • Downloading (蓝色) - 这是浏览器用来下载资源所用的时间. 这段时间越长, 说明资源越大. 理想情况下, 你可以通过控制资源的大小来控制这段时间的长度。

那么除了瀑布图的长度外，我们如何才能判断一个瀑布图的状态是健康的呢？

  • 首先, 减少所有资源的加载时间. 亦即减小瀑布图的宽度。 瀑布图越窄, 网站的访问速度越快。
  • 其次, 减少请求数量，也就是降低瀑布图的高度。瀑布图越矮越好。
  • 最后, 通过优化资源请求顺序来加快渲染时间。从图上看, 就是将绿色的”开始渲染”线向左移。这条线向左移动的越远越好。

这样，我们就可以从network的角度去排查“慢”的问题。

蓝线表示 DOMReady 事件。事件触发的条件是：浏览器已经把整个 HTML 文档的 DOM 结构解析完毕。一般前端开发者监听这个事件是为了可靠地在文档中查找元素。这个事件触发之前有可能只下载了半截 HTML，想要的元素还没出现。

红线表示 load 事件，触发条件是：整个页面的 JS CSS 图片都下载完毕。用户看到的进度条/小菊花已经不再显示为 “忙” 的状态。是用户眼中的加载完毕。

Performance

qeLYdg.png

代码格式化

j4H5EF.png

调整页面元素布局

元素面板直接拖动即可

控制台输入：

  • $0 返回当前选中元素
  • $_ 返回上一次的结果
  • copy(想要复制的数据)