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:
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.
- Right click on column header with request list. In context menu with columns select Response Headers => Manage Header Columns…:
- Add custom column header with value “Date”
- Result
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:
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.
