/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(135) Continue to Location Markers CSS and JavaScript code diffs with the Changes Panel (137)

Chrome DevTools: Your backend server timing performance, visualised in DevTools

17th March 2017
Your backend server timing performance, visualised in DevTools

The Chrome DevTools will display your backend server timing metrics when you provide the Server-Timing HTTP header field.

Here's a code example in Node.js:

const headers = {
    'Server-Timing': `
        lb=18; "Load Balancer",
        server-3=104; "Server #3 Startup",
        db-read=187; "Database Read",
        aws-download=317; "AWS Content Download",
        db-write=218; "Database Write",
        templating=48; "Templating plugin"
    `.replace(/\n/g, '')
};

response.writeHead(200, headers);

In the above example, headers['Server-Timing'] contains relevant server timing data which DevTools displays in the Timing pane in the Network Panel.

Note: Having backend performance metrics in your production website may be useful. If you consider implementing this, you should be aware of Timing attacks as potential attack vectors.

Update: Network on Timeline is in Chrome Stable!

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.