Inspecionar elemento, breakpoints em JavaScript e console API já virou muito mainstream. Vamos conhecer neste post algumas features mais hipsters — porém úteis — do Chrome Developer Tools que vão melhorar seu dia-a-dia.

Compartilhar e analisar uma Timeline gravada por outro

Você está com aquele bug Cássia Eller na sua aplicação, deadline aproximando e você tem certeza que se fosse possível enviar os dados da sua timeline para aquele seu amigo que manja de todos os paranauês do front-end, ele iria te ajudar.

Seus problemas se acabaram-se. Agora você pode compartilhar sua timeline e analisar uma gravação alheia. Na aba Timeline clique com o botão secundário do mouse em qualquer lugar e aparecerá uma opção para salvar e uma outra para carregar dados de uma Timeline gravada.

Emulando dispositivos

Permite emular o tamanho da tela, pixel ratio e user agent string dos dispositivos móveis mais populares. Para acessar essa feature, chame o Console drawer como indicado na figura abaixo.

Uma vez no drawer, vá na aba Emulation e escolha o aparelho que deseja emular. Caso o aparelho não esteja na lista, é possível inserir todos os dados de forma manual.

Emulando acelerômetro

Além de emular dispositivos móveis, podemos emular alguns de seus sensores. Para emular o acelerômetro, por exemplo, vá ao drawer (o mesmo do item anterior), depois na aba Emulation e clique no checkbox Accelerometer. Você pode mexer a representação 3D do dispositivo para emular uma determinada posição ou pôr valores diretamente em cada eixo.

Contador de FPS

Útil para visualizar, em tempo real, o frame rate de sua aplicação. Para ativá-lo, vá no drawer, depois na aba Rendering e clique no checkbox  Show FPS meter.

Quando ativo, irá aparecer uma caixa preta no topo à direita com detalhes sobre a quantidade de frames que estão sendo renderizados por segundo.

Debugar requisições Ajax de forma mais fácil

Na aba Sources, ao lado direito, é possível adicionar breakpoints dinâmicos para que o código pare a execução toda vez que uma chamada XHR possua uma dada string em sua URL.

Procure por uma string entre todos os arquivos

Um dos atalhos que mais uso. Aperte Cmd + Opt + F (Ctrl + Shift + F no Windows e Linux) para procurar qualquer palavra ou expressão regular entre todos os arquivos carregados (inclusive os carregados em tempo de execução).

Replay de chamadas Ajax

Já pensou ter que refazer sempre aquele fluxo enorme na sua aplicação só para disparar novamente aquela requisição Ajax (XHR)? Com esse atalho você pode dar um replay em qualquer chamada Ajax.

Na aba Network, clique com o botão secundário em cima de qualquer requisição XHR e escolha a opção Replay XHR.

Copiando requisições como comando cURL

Praticamente uma derivação do replay de chamadas Ajax. Com a diferença que aqui é gerado um comando cURL da requisição feita, com todos os parâmetros e cabeçalhos. Cole no seu terminal e aperte enter para disparar uma requisição idêntica à que foi disparada pelo seu navegador.

Troque rapidamente entre abas

Para navegar de forma rápida entre as abas do Dev Tools, utilize Cmd + [ e Cmd + ] (ou Ctrl + [ e Ctrl + ] no Windows e Linux).

Preservar o log do console durante navegação

Sabe quando você quer debugar algo que acontece um pouco antes de um redirect mas o redirect sempre apaga o log do console? Seus problemas acabaram. Clique com o botão direito no console e escolha a opção Preserve log upon navigation.

Benchmark usando console.time

Caso queira medir quanto tempo uma determinada operação leva para ser executada, basta usar console.time() e, quando a operação acabar usar o método console.timeEnd() passando a mesma string, como no exemplo abaixo.

Limpando o histórico do console

Bastante útil quando se começa a usar mais a aba console. Cmd + K no OS X e Ctrl + L no Windows e Linux para limpar o console. Também funciona com o método console.clear().

Mais um segredo

A capa do post também possui um pequeno segredo. Existe um rosto escondido entre os grãos de café. Consegue achar, olhos de águia?