Paul Irish falou recentemente no seu Twitter sobre um recurso muito legal no Chrome Devtools! A guia timings pode interpretar cabeçalhos HTTP enviados pelo aplicativo e processá-los.

? View your server’s metrics in @ChromeDevTools via Server Timing headers. Big thanks to longtime Firebug developer @sroussey for the patch! pic.twitter.com/OjDDIv0lLR

— Paul Irish (@paul_irish) 7 de fevereiro de 2017

É parecido com isso no Network Inspector do Chrome:

Para testar, clique com o botão direito do mouse nesta página, vá para Inspect, depois na guia Network, atualize a página, clique no recurso principal que carregou e clique na guia Timings.

A magia está no bloco de Server Timings abaixo. O navegador interpreta o cabeçalho especial do Server-Timing e processa isso na linha de tempo.

Você pode testar isso neste site rapidamente, eu usei alguma mágica do .htaccess:

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

O formato é muito simples: o cabeçalho Server-Timing pode conter um padrão key=value com uma descrição adicional. O tempo é escrito em segundos, então o exemplo acima é traduzido como:

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

Obviamente, esses são apenas valores fixos arbitrários, mas isso abre muitas oportunidades para que o aplicativo ou o servidor web incluam cabeçalhos de depuração opcionais que podem ser usados dentro do navegador para ver como o tempo do servidor foi gasto.

Se você quiser incluir isso em seu próprio aplicativo, é apenas uma questão de definir o cabeçalho Server-Timing correto com o formato correto, o Chrome interpreta o resto.

Uma característica tão legal!

***

Mattias Geniar faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela Redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://ma.ttias.be/server-timings-chrome-devtools/