Visão geral

O Chrome DevTools é um conjunto de ferramentas para desenvolvedores da Web integrado diretamente ao navegador Google Chrome. O DevTools pode ajudar você a editar páginas rapidamente e diagnosticar problemas em tempo real, o que ajuda a criar sites melhores em menos tempo.

Confira o vídeo para ver demonstrações ao vivo dos principais fluxos de trabalho do DevTools, incluindo depuração de CSS, prototipagem de CSS, depuração de JavaScript e análise do desempenho de carregamento.

Abrir DevTools

Há muitas maneiras de abrir o DevTools, porque usuários diferentes querem acesso rápido a diferentes partes da IU do DevTools.

  • Para trabalhar com o DOM ou o CSS, clique com o botão direito em um elemento na página e selecione Inspecionar para acessar o painel Elementos. Ou pressione Command + Option + C (Mac) ou Control + Shift + C (Windows, Linux, ChromeOS).
  • Para acessar as mensagens registradas ou executar o JavaScript, pressione Command+Option+J (Mac) ou Control+Shift+J (Windows, Linux, ChromeOS) para acessar diretamente o painel Console.

Consulte Abrir o Chrome DevTools para ver mais detalhes e fluxos de trabalho.

Começar

Se você é um desenvolvedor da Web mais experiente, aqui estão os pontos de partida recomendados para aprender como o DevTools pode melhorar sua produtividade:

Conheça o DevTools

A interface do DevTools pode ser um pouco complexa... são tantas guias! Mas, se você dedicar algum tempo para se familiarizar com cada guia e entender o que é possível, vai descobrir que o DevTools pode aumentar muito sua produtividade.

Modo dispositivo

Modo de dispositivo ativado na janela de visualização.

Simule dispositivos móveis.

Painel Elementos

Elements.

Visualizar e alterar o DOM e o CSS.

Painel do console

Painel do console.

Consultar mensagens e executar o JavaScript no console.

Painel Origens

Origens.

Depure o JavaScript, mantenha as mudanças feitas no DevTools nas atualizações da página, salve e execute snippets do JavaScript e salve as mudanças feitas no DevTools em fontes locais.

Painel "Network"

Painel Network.

Consultar e depurar atividade de rede.

Painel do gravador

Painel do gravador.

Gravar, reproduzir e medir fluxos de usuários.

Painel de desempenho

Painel de desempenho.

Encontrar maneiras de melhorar o desempenho de carga e tempo de execução.

Painel de memória

Painel de memória.

Encontre e corrija problemas de memória que afetam o desempenho da página, como vazamentos de memória.

Painel do aplicativo

O painel "Aplicativo" com a seção "Service workers" aberta.

Inspecione todos os recursos carregados, incluindo bancos de dados IndexedDB ou Web SQL, armazenamento local e de sessão, cookies, cache de aplicativos, imagens, fontes e folhas de estilo.

Painel de segurança

Painel de segurança

Depure problemas de conteúdo misto, de certificado e muito mais.

Comunidade

Registre relatórios de bugs e solicitações de recursos no Crbug, que é o rastreador de bugs da equipe de engenharia.

Crbug (em inglês)

Se você quiser nos alertar sobre um bug ou solicitar um recurso, mas não tiver muito tempo, envie um tweet para @ChromeDevTools. Respondemos e enviamos comunicados da conta regularmente.

Twitter

Para receber ajuda com o uso do DevTools, o Stack Overflow é o melhor canal.

Stack Overflow (em inglês)

Para registrar bugs ou solicitações de recursos nos documentos do DevTools, abra um problema no GitHub.

Problemas no Documentos Google

O DevTools também tem um canal Slack, mas a equipe não o monitora de forma consistente.

Slack