See request time in Chrome developer tools

During ajax development, I often need a way of seeing the time a request was sent in Chrome developer tools. Either an absolute time (such as 3:45:23 PM) or a relative time (4.56s since page load) is fine.

The closest I can find is the timeline in the Network tab, showing the Start Time (you can click on the Timeline header to select which info it is showing), but you can often only get from it to the nearest 20 seconds:
enter image description here

You just need to click on the request row:

Right Click > Copy > Copy All as HAR

Then open the HAR file:

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

There is the exact request timing info.

Add custom column to request table.

  1. Right click on column header with request list. In context menu with columns select Response Headers => Manage Header Columns…:

enter image description here

  1. Add custom column header with value “Date”

enter image description here

  1. Result

enter image description here

This feels like a giant oversight to me on the part of the Chrome devs. They give you every possible bit of timing except the absolute start/end times (and like you, I’d be happy for relative timing since the start of the page load).

The best I’ve been able to do is to set the tightest possible range in the overview pane, and then your timings are displayed with more precision.

See screenshot for details:

Read More:   Stop keypress event

chrome dev tools network tab range selection

You can console.log before ajax calls.

Another possibility is to use a ajax handler that will get all ajax calls in your page.

Check here discussion how to achieve that.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts