Chrome开发工具 评估网络性能

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 评估网络性能关于您的每个应用程序的网络运营，包括详细的时序数据，HTTP请求和响应头，cookies，WebSocket的数据，以及更多的网络小组记录的信息。网络面板可帮助你解答您的Web应用程序的网络性能问题，如：其中资源最慢时间第一个字节？哪些资源加载（持续时间）的时间最长？是谁发起的特定网络请求？多少时间花费在各种网络阶段的特定资源？关于资源定时 API网络面板使用资源计时 API，一个 JavaScript API，提供详细的网络定时数据为每个加载的资源。例如，该 API 可以告诉你准确的图像 HTTP 请求启动时，被接收的图像的最后一个字节时。下图显示了资源定时 API 提供了网络定时的数据点。该 API 可用于任何网页，而不仅仅是 DevTools。在 Chrome 浏览器，它暴露了全球window.performance对象的方法。该performance.getEntries（）方法返回“资源定时对象”，一个页面上的每个请求的资源的数组。试试这个：打开 JavaScript 控制台当前页面，输入以下的提示，并回车：window.performance.getEntries()[0]试试这个：打开 JavaScript 控制台当前页面，输入以下的提示，并回车：每个时间戳是微秒，即ResolutionTime规范。此 API 可 inChrome 作为window.performance.now（）方法。网络面板概述网络面板会自动记录所有的网络活动，而 DevTools 是开放的。当你第一次打开面板时可能为空。刷新页面开始记录，或者干脆等待网络活动发生在你的应用程序中。每个请求的资源被添加作为行到网络表，其中包含下面列出的列。请注意以下有关网络表：未在下面列出的所有列在默认情况下可见;您可以轻松地显示或隐藏列。某些列包含主字段和次级领域（例如：时间和等待时间）。当观看网络表的大资源行这两个领域都显示;使用小的资源行时只有主域显示。你可以通过单击列标题由列的值排序表。在时间轴中列的行为有所不同：单击其列标题显示的其他排序字段的菜单。见瀑布景色，排序和过滤的更多信息。 名称和路径该资源的名称和URL路径分别方法用于请求的HTTP方法。例如：GET或POST状态和文本HTTP状态代码和文本消息。域名资源请求的域名。类型MIME类型所请求资源的。启动器的对象或过程发起请求。它可以有以下值之一： 分析器Chrome的HTML解析器发出请求重定向一个HTTP重定向发起请求。脚本脚本发起请求。其他一些其他过程或动作发起的请求，例如用户通过链接导航到网页，或通过在地址栏中输入URL。 Cookies在请求传送 Cookies 数目。这些对应于Cookies标签查看细节对于给定的资源时显示的Cookies。Set-Cookies在HTTP请求中设置的Cookie的数目。大小和内容大小是响应头（通常为几百个字节）加上响应主体的组合大小，作为交付服务器。内容是资源的解码的内容的大小。如果资源是从浏览器的缓存，而不是在网络上加载，这个字段包含文本（从缓存）。时间和等待时间时间是总的持续时间，从请求到收到响应中的最后一个字节的开始。延迟是加载的第一个字节中的响应的时间时间表时间轴栏显示所有的网络请求的视觉瀑布。单击该列的标题揭示了额外的排序字段的菜单。在保存导航网络日志默认情况下，当前的网络日志记录时，会导航到另一个页面，或者刷新当前页面丢弃。要保留日志记录在这些情况下，单击黑色 保留日志在导航键不要在导航在网络面板底部保存日志;新记录被追加到表的底部。再次单击该按钮（红色保留在导航资源）来禁用日志保存。排序和过滤默认情况下，在网络表的资源是由每个请求（在网络“瀑布”）的开始时间进行排序。您可以通过单击列标题排序表由另一列值。再次单击该标题更改排序顺序（升序或降序）。时间轴列是别人的独特之处，点击后，会显示额外的排序字段的菜单。该菜单包含以下排序选项：时间轴 - 排序由每个网络请求的开始时间。这是默认的排序，并且是相同的开始时间选项排序）。开始时间 - 由每个网络请求的开始时间排序（同样如由时间轴选项排序）。响应时间 - 通过排序每个请求的响应时间。结束时间 - 通过排序时，每个请求完成的时间。持续时间 - 排序由每个请求的总时间。延迟 - 排序由请求的开始和响应的开始之间的时间（也被称为“时间到第一个字节”）。要过滤的网络表，只显示某些类型的资源，单击内容类型之一沿着面板的底部：文档，样式表，图片，脚本，XHR，字体的 WebSockets 和其他。在下面的截图只CSS资源显示。要查看所有内容类型，单击全部过滤器按钮。高级过滤除了资源类型过滤，可以过滤查询缩小资源。在过滤器输入字段200：例如，要查找其中有 200 状态码的所有资源，你可以输入查询的StatusCode。请注意以下行为：过滤器查询包含一个类型（的StatusCode）和价值（200）。过滤器查询是不区分大小写，所以你可以键入大写或小写。该过滤器类型为您提供了自动完成建议。使用箭头键来形成一个选择，然后按Tab键选择它。该过滤器值具有自动完成这表明你重视存在于当前的网络记录。快速预览您的查询的结果，使用Up/Down箭头键循环通过自动完成建议。结果立即出现，即使你不按Enter键或选项卡来完成选择。否定过滤器的查询，在前面加上一个破折号查询（ - ），例如-StatusCode：200。可用过滤器类型： 域从资源的URL的域部分。例如www.google-analytics.com。具有响应头检查资源都有一个响应头，无论该值的。例如访问 - 控制 - 允许原产地。是显示在当前时间点运行的请求。当前可用值：运行降幅高于示出了具有传输大小比规定量更大的请求。假设单位以字节为单位，但千字节（K）和兆（M）的单位也被允许：例如：较大比：50，降幅高于：150K，降幅高于：20M方法HTTP方法使用。例如GET。MIME类型也被称为内容类型 - 的标识符的资源的类型。例如text / html的。方案在URL方案部分。例如HTTPS。设置cookie的名称Cookie的名称服务器设置。例如的loggedIn（假设类似的loggedIn = TRUE一个cookie）。设置cookie的值该cookie由服务器设置的值。例如真正的（假定喜欢的loggedIn = TRUE一个cookie）。设置Cookie域cookie的域名服务器设置为。例如foo.com（假设类似的loggedIn =cookie真;域= foo.com;路径= /;过期=周三，2021年1月13日22时23分01秒格林尼治标准??时间;仅Http）。状态代码在HTTP响应中的状态代码。