Server-side timings in the Chrome Devtools

Mattias Geniar, Wednesday, February 8, 2017

Paul Irish just announced this on Twitter and it's a seriously cool feature in the Chrome Devtools! The timings tab can interpret HTTP headers sent by the application and render them.

It looks like this in the Network Inspector of Chrome:

To test this, right click on this page, go to Inspect, then the Network tab, refresh the page, click the main resource that loaded and hit the Timings tab.

The magic is in the Server Timings block below. The browser interprets the special Server-Timing header and renders that in the timeline.

You can test this on this site as I quickly cheated with some .htaccess magic:

$ cat .htaccess
Header add Server-Timing 'cpu=0.009; "CPU", mysql=0.005; "MySQL", filesystem=0.006; "Filesystem"'

The format is very simple the Server-Timing header can contain a key=value pattern with an additional description. The time is written as seconds, so the example above is translated as;

cpu=0.009; "CPU time" ==> 9ms spent on CPU
mysql=0.005; "MySQL time" ==> 5ms spent on MySQL queries
filesystem=0.006; "Filesystem" ==> 6ms spent on the filesystem

Obviously, these are just arbitrary fixed values, but this opens a lot of opportunities for either the application or the webserver to include optional debug headers that can be used inside the browser to see how server time was spent.

If you want to include this in your own application, it's just a matter of setting the correct Server-Timing header with the correct format, Chrome interprets the rest.

Such a cool feature!

Hi! My name is Mattias Geniar. I'm a Support Manager at Nucleus Hosting in Belgium, a general web geek, public speaker and podcaster. Currently working on DNS Spy. Follow me on Twitter as @mattiasgeniar.

I respect your privacy and you won't get spam. Ever.
Just a weekly newsletter about Linux and open source.

SysCast podcast

In the SysCast podcast I talk about Linux & open source projects, interview sysadmins or developers and discuss web-related technologies. A show by and for geeks!

cron.weekly newsletter

A weekly newsletter - delivered every Sunday - for Linux sysadmins and open source users. It helps keeps you informed about open source projects, Linux guides & tutorials and the latest news.

Share this post

Did you like this post? Will you help me share it on social media? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *