在 Chrome 开发者工具中查看请求时间

Posted 2023-02-22

【中文标题】在 Chrome 开发者工具中查看请求时间

【英文标题】：See request time in Chrome developer tools

【发布时间】：2016-10-08 13:19:21

【问题描述】：

在 ajax 开发期间，我经常需要一种方法来查看在 Chrome 开发人员工具中发送请求的时间。绝对时间（例如下午 3:45:23）或相对时间（自页面加载后 4.56 秒）都可以。

我能找到的最接近的是“网络”选项卡中的时间线，显示了开始时间（您可以单击时间线标题以选择它显示的信息），但您通常只能从中获得最接近的 20 秒：

【参考方案1】：

您只需要点击请求行：

Right Click > Copy > Copy All as HAR

然后打开HAR文件：

  "log": 
    "version": "1.2",
    "creator": 
      "name": "WebInspector",
      "version": "537.36"
    ,
    "pages": [],
    "entries": [
      
        "startedDateTime": "2018-08-24T18:34:12.564Z",
        "time": 84.96354891383089,

有确切的请求时间信息。

【讨论】：

对某些人来说可能很明显，但只想注意时间以毫秒为单位（84.963... = .084963 秒）

【参考方案2】：

这对我来说就像是 Chrome 开发人员的巨大疏忽。除了绝对的开始/结束时间之外，它们会为您提供所有可能的时间（和您一样，我很乐意从页面加载开始以来的相对时间）。

我能做的最好的事情是在概览窗格中设置尽可能小的范围，然后更精确地显示您的时间。

详情见截图：

【参考方案3】：

向请求表添加自定义列。

右键单击带有请求列表的列标题。在带有列的上下文菜单中选择响应标题 => 管理标题列...：

添加值为“日期”的自定义列标题

结果

【参考方案4】：

您可以在 ajax 调用之前使用 console.log。

另一种可能性是使用 ajax 处理程序，它将获取页面中的所有 ajax 调用。

查看here讨论如何实现。

【参考方案5】：

您可以在Timing标签中查看请求时间：