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
Use o Device Mode para criar experiências web totalmente responsivas e voltadas a dispositivos móveis.
- Device Mode
- Testar janelas de visualização responsivas e específicas de dispositivo
- Emular sensores: acelerômetro de geolocalização
Elements
Use o painel Elements para iterar no layout e criar um site manipulando livremente o DOM e o CSS.
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
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.
- Depurar com pontos de interrupção
- Depurar código ofuscado
- Configurar persistência com os Espaços de trabalho do DevTools
Network
Use o painel Network para obter insights sobre recursos solicitados e baixados e otimizar o desempenho do carregamento da página.
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.
- Como avaliar o desempenho
- Analisar o desempenho em tempo de execução
- Diagnosticar layouts síncronos forçados
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
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
Use o painel Security para depurar problemas de conteúdo misto e com seu certificado, entre outros.