Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas de autoria e depuração de Web incorporado ao Google Chrome. Use o DevTools para iterar, depurar e criar o perfil do seu site.

Abrir o Chrome DevTools

  • Selecione More Tools > Developer Tools no menu do Google Chrome.
  • Clique com o botão direito em um elemento da página e selecione Inspect
  • Use os atalhos de teclado Ctrl+Shift+I (Windows) ou Cmd+Opt+I (Mac)

Descobrir os painéis

Device Mode

Device Mode Use o Device Mode para criar experiências web totalmente responsivas e voltadas a dispositivos móveis.

Elements

Painel Elements Use o painel Elements para iterar no layout e criar um site manipulando livremente o DOM e o CSS.

Console

Painel Console Use o Console para registrar informações de diagnóstico durante o desenvolvimento ou como shell para interagir com o JavaScript da página.

Sources

Painel Sources Depure o JavaScript usando pontos de interrupção no painel Sources ou conecte seus arquivos locais por meio de Espaços de trabalho para usar o editor em tempo real do DevTools.

Network

Painel Network Use o painel Network para obter insights sobre recursos solicitados e baixados e otimizar o desempenho do carregamento da página.

Timeline

Painel Timeline Use o Timeline para melhorar o desempenho da página em tempo de execução, gravando e explorando os diversos eventos que acontecem durante o ciclo de vida de um site.

Profiles

Painel Profiles Use o painel Profiles se precisar de mais informações que as fornecidas pelo Timeline como, por exemplo, para rastrear vazamentos de memória.

Application

Painel Application Use o painel Resources para inspecionar todos os recursos carregados, incluindo bancos de dados Web SQL ou IndexedDB, armazenamento local e da sessão, cookies, cache do aplicativo, imagens, fontes e folhas de estilo.

Security

Painel Security Use o painel Security para depurar problemas de conteúdo misto e com seu certificado, entre outros.

Envolva-se

Twitter Stack Overflow Slack