Image for post
Image for post
Tudo que é bom, pode melhorar!

Tunando o Chrome DevTools com o DevTools Experiments

Nós sabemos que o Chrome DevTools é uma das melhores ferramentas para debug de aplicações web hoje em dia, e, um futuro não tão longe, provavelmente para aplicações Node.js também! (Quem sabe até um editor?)

Falo isso devido a última apresentação do Paul Irish no Chrome Dev Summit 2016, simplesmente incrível as possibilidades novas com o Chrome DevTools!

Vale a pena conferir:

Se você prestar atenção, ele está usando o Chromium, ao invés do Chrome Canary ou Chrome.

Se você já trabalha um tempo na área, não é novidade que as empresas disponibilizam navegadores versões Beta e Alpha (ou específicas para desenvolvedores, como no caso do Firefox Developer Edition), com ferramentas para debugging, idéias futuras e personalizações específicas para testar a web em geral.

Depois que tudo está rodando perfeitamente, eles liberam a versão estável do navegador.

Até aí tudo bem, mas qual o "chan"?

Essas novidades também "não estão" no Chromium

Se você fazer o download do Chromium e abrir o DevTools, você terá basicamente a mesma experiência do Chrome Canary, não tem nada de diferente.

Se não é o Chrome, não é Canary e não é o Chromium, quem é então?

Habilitando o DevTools Experiments

Para poder utilizar as novidades, você precisa habilitar uma opção "escondida" nas configurações do Chrome (isso serve para qualquer versão), as etapas para chegar são:

  • Navegar até: chrome://flags/#enable-devtools-experiments
  • Habilitar essa opção clicando em: enable
  • Reiniciar o navegador
  • Abrir o DevTools e ir até "Settings" (aqueles 3 pontinhos do lado direito superior)
  • Selecionar a aba "Experiments" na lateral esquerda e habilitar as opções desejadas
Image for post
Image for post
Navegando até os experimentos do Chrome
Image for post
Image for post
Abrindo "Settings" do Chrome DevTools
Image for post
Image for post
Aba de experimentos do Chrome, com novas ferramentas de debug

E você está feito!

Pode desfrutar de todas as novas opções do Chrome para debug e análise da sua página web.

Porém… olhando de perto… parece que falta alguma coisa…

O Konami Code do Chrome DevTools

Image for post
Image for post
Quer ir para o mundo secreto? Tem que decorar esse código!

Parece aquelas telas secretas do Mário, que você só descobre por acaso depois jogar bastante!

Com a tela da aba "Experiments" aberta, aperte 6 vezes a tecla Shift.

Oi? É isso mesmo?

Sim, é isso mesmo!

Após habilitar o "DevTools Experiments", reiniciar o navegador, ir até "Settings" e selecionar a aba "Experiments", aperte 6 vezes a tecla Shift.

Image for post
Image for post
No momento que escrevo, essas são as opções para o Chrome Canary Version 57.0.2973.0 (Official Build) canary (64-bit)

Maneiro né?!

Agora todas as opções estão aí!!! 🎉🎉

Recomendo as opções "Node debugging" e "Audits 2.0"

Obrigado por ter lido até aqui, se você gostou do post, manda um 💚 e compartilha no Twitter! Valeu! 🙏🏼

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store