Chrome Devtool 使用指南

Chrome Devtool Performance使用指南

运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。

让我们开始吧

在这篇指南中，我们会用Performance工具去分析一个现有的在线DEMO，然后教会你怎么去分析，从而找到性能瓶颈。
打开Chrome的匿名模式。匿名模式可以保证Chrome在一个相对干净的环境下运行。比如说，你安装了许多chrome插件，这些插件可能会影响我们分析性能表现。
在匿名模式下打开右边这个链接，DEMO，这个网页就是我们要用来分析的DEMO。这个页面里都是很多上下移动的蓝色小方块。
按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 来打开Devtools

模拟移动设备的CPU

移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。

在DevTools中，点击 Performance 的 tab。
确保 Screenshots checkbox 被选中
点击 Capture Settings（⚙️）按钮，DevTools会展示很多设置，来模拟各种状况
对于模拟CPU，选择2x slowdown，于是Devtools就开始模拟两倍低俗CPU

设置DEMO

为了使得这个DEMO有相对统一的运行表现（不同的读者，机器的性能千差万别）。这个DEMO提供了自定义功能，用来确保这个DEMO的统一表现。

一直点击 Add 10 这个按钮直到你能很明显看到蓝色小方块移动变慢，在性能比较好的机器上，大概要点击20次左右。
点击 Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。
点击 un-optimize 按钮，蓝色小方块又会变成之前的模样。

记录运行时性能表现

在之前的DEMO中，当你运行优化模式的时候，蓝色小方块移动地非常快。为什么呢？明明两个模式都是移动了同样数量的小方块而且移动的时间也一样。那么现在我们在Performance界面下录制下发生的一切，并且学习如何分析这个记录，从而找到非优化模式下的性能瓶颈。

在DevTools中，点击 Record 。这时候Devtools就开始录制各种性能指标
等待几分钟
点击Stop按钮，Devtools停止录制，处理数据，然后显示性能报告

分析报告

一旦你得到了页面的性能表现报告，那么就可以用它来分析页面的性能，从而找到性能瓶颈。

分析每一秒的帧

FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。

观察FPS图表，如果你发现了一个红色的长条，那么就说明这些帧存在严重问题，有可能导致非常差的用户体验。一般来说，绿色的长条越高，说明FPS越高，用户体验越好。
就在FPS图表下方，你会看到CPU图表。在CPU图表中的各种颜色与Summary面板里的颜色是相互对应的，Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。如果你看到了某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。
把鼠标移动到FPS，CPU或者NET图表之上，DevToos就会展示这个时间点界面的截图。左右移动鼠标，可以重发当时的屏幕录像。这被称为scrubbing, 他可以用来分析动画的各个细节。
在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展示这个帧的FPS。每个帧可能都在60以下，都没有达到60的标准。

当然这个对于DEMO，可以相当容易观察到性能的问题。但是在现实使用场景下，就不是那么容易观察到了。所以要把常常使用这些工具来分析页面。

小功能：显示实时FPS面板

另外一个好用的小工具就是实时FPS面板，它可以实时展示页面的FPS指标

按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单
输入Rendering，点选Show Rendering
在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。
关闭FPS Meter只要按下Escape就可以了。这篇指南里暂时用不上这个功能。

定位瓶颈

现在已经确定到这个页面的动画性能表现不太好，那么下一步就是找到为什么

注意Summary面板，你会发现CPU花费了大量的时间在rendering上。因为提高性能就是一门做减法的艺术，你的目标就是减少rendering的时间
展开Main图表，Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。
在性能报告中，有很多的数据。可以通过双击，拖动等等动作来放大缩小报告范围，从各种时间段来观察分析报告。
在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
双击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个链接，双击它会让高亮触发这个事件的event。如果点击了app.js:94这个链接，就会跳转到对应的代码处。
在app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，你会看到它们每个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展示了更多关于这个事件的信息。确实，这里有很多reflow的警告。
在summary面板里点击app.js:70链接，Devtools会跳转到需要优化的代码处

译者博客：https://nicholaslee119.github.io/
原文出处：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

基本概念概述

各种颜色代表的含义

加载中（蓝色）——网络相关事件，如HTTP请求。它还包括诸如HTML解析、CSS解析、图像解码等活动。
执行脚本（黄色）——与JavaScript相关的事件，包括特定于DOM的活动、垃圾收集、特定于网站的JavaScript、其他活动，等等。
渲染（紫色）——与页面渲染相关的所有事件，包括将CSS应用于网页HTML等活动，以及会导致重新渲染的活动，例如由JavaScript触发的对页面HTML的更改。
绘制（绿色）——与将布局绘制到屏幕上相关的事件，例如层合成和光栅化。

HTML解析事件 / DOM就绪事件 / 关联的脚本活动

点击其中之一：

jank

页面性能的主要目标：最小化浏览器加载和渲染页面的时候
jank（单一的帧中占用了太多CPU时间）是元凶：jank是指交互和动画效果卡顿，或未能顺利渲染
帧是浏览器在每秒显示时间内所做的工作量。这里的工作指的是前面描述的事件，例如加载、脚本执行、绘制和渲染。
Performance面板以毫秒为单位进行测量。一秒钟内有60帧和1000毫秒
为属性设置动画时，animate会调用一个计时器，而正是这个计时器导致了一个相当小的jank
CSS过渡是CSS的一项原生技术，非常适合线性动画

标记时间线

在Chrome中对Javascript进行基准测试

console.time()
console.timeEnd()

Chrome Devtool Network使用☞南

模拟一个比较慢的网络环境
创建自定义网络节流配置
禁用缓存
选中Disable cache，首次访问一个网站时，不会有任何资源缓存，否则网站的资源将会从缓存中提供

首字节时间和加载时间

首字节时间（TTFB）：用户请求网页到响应的第一个字节到达之间的时间
加载时间：资源完全完成下载所需的时间
TTFB值标记在Chrome中，发出请求之前还会执行一些步骤，例如排队请求、DNS查找、连接设置和SSL握手。
为了消除DNS查找的延迟，浏览器会创建一个DNS查找缓存，如果一个域名的对应IP地址不在缓存中，则查找IP地址将导致延迟。但是重复请求时，IP地址将被缓存以消除后续请求的延迟。

Chrome Devtool 使用指南相关推荐

使用libFuzzer fuzz Chrome V8入门指南
本文讲的是使用libFuzzer fuzz Chrome V8入门指南, 什么是V8? V8(也称为Chrome V8)是由Chromium Project开发的用于Google Chrome浏览器 ...
Chrome控制台实用指南
前言原文地址:Chrome控制台使用指南博客地址:Damonare的个人博客 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还 ...
Chrome 开发工具指南
Chrome 开发工具指南谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
Chrome 控制台实用指南
Chrome 控制台实用指南原文地址:http://web.jobbole.com/87969/ 前言 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新 ...
Chrome 开发工具指南——通过工作空间保存更改
简介 Chrome DevTools 允许你对页面或者 CSS 做出更改,并且可以实时查看更改效果.但是如果你需要复制外部编辑器中更改的内容并粘贴到 DevTools 时,什么对你才是更加重要的呢?工 ...
Chrome Devtool — Performance
前言 Performance 一个在前端开发领域中,无法被忽视的存在.使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动.本文将详细介绍如何使用perf ...
Chrome浏览器使用指南
浏览器是用来显示在万维网或局域网等内的文字.图像及其他信息的软件,它还可以让用户与这些文件进行交互操作.浏览器是电脑上网时经常使用到的应用软件,浏览器正是Internet时代的产物,随着电脑操作系统的 ...
Chrome扩展开发指南
前言 Chrome 扩展(通常也叫插件)也是软件程序,使用 Web(HTML, CSS, and JavaScript)技术栈开发.允许用户自定义 Chrome 浏览体验.开发者可以通过增加特效或功能 ...
Chrome devtool调试出现404的解决办法
pc调试app,使用Chrome://inspect/#devices,结果出现404 搜索了很多,以下网上度到的解决方法,全部测试,一个都不行 1.谷歌浏览器不是最新版本,我升级最新版本,还是无用, ...