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.
Começar
Todas as maneiras de abrir o Chrome DevTools.
Fique por dentro das mudanças mais recentes do DevTools.
Uma série de vídeos curtos para você aprender sobre os recursos do DevTools.

Comandos e atalhos

Realizar tarefas com rapidez.
Um guia sobre como abrir o menu de comando, executar comandos, abrir arquivos, ver outras ações e muito mais.
Leia o documento
A documentação canônica para atalhos de teclado do Chrome DevTools.
Leia o documento
Confira a aparência e o comportamento de uma página da Web quando o JavaScript está desativado.
Leia o documento
Use dispositivos virtuais no Device Mode do Chrome para criar sites móveis.
Encontre texto em todos os recursos carregados com a guia Pesquisar.

Painéis

Conheça o poder de cada painel do DevTools.
Saiba como ver e mudar o DOM de uma página usando o Chrome DevTools.
Confira a documentação
Saiba como visualizar e mudar o CSS de uma página usando o Chrome DevTools.
Confira a documentação
Registre mensagens e execute o JavaScript.
Confira a documentação
Veja e edite arquivos, crie snippets, depure o JavaScript e configure um espaço de trabalho.
Confira a documentação
Registre solicitações de rede.
Confira a documentação
Avalie o desempenho do site com o DevTools.
Confira a documentação
Encontre problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória, ocupação excessiva de memória e coletas de lixo frequentes.
Confira a documentação
Inspecione, modifique e depure apps da Web, teste o cache e visualize o armazenamento.
Confira a documentação
Gravar, repetir, medir os fluxos de usuários e editar as etapas.
Confira a documentação
Descubra um conjunto de opções que afetam a renderização de conteúdo da Web.
Confira a documentação
Encontre e corrija problemas no seu site.
Use o painel "Segurança" para garantir que a página esteja totalmente protegida por HTTPS.
Inspecione um ArrayBuffer, uma TypedArray ou um DataView no JavaScript, além do WebAssembly e da memória de apps Wasm em C++.
Substitua a string do user agent. Desative a opção "Selecionar automaticamente" e escolha da lista ou insira uma string personalizada.
Use o painel "Mídia" para ver informações e depurar os players de mídia por guia do navegador.
Inspecionar e modificar animações com a guia "Animations".
Acompanhar alterações em HTML, CSS e JavaScript.
Encontre e analise códigos JavaScript e CSS não utilizados no Chrome DevTools.
Use a guia da gaveta "Recursos para desenvolvedores" para verificar se os mapas de origem foram carregados e carregá-los manualmente.
Identifique possíveis melhorias no CSS com o painel "Visão geral do CSS".
Otimize a velocidade do site com o painel do Lighthouse.
Receba insights úteis sobre a performance do seu site com o painel "Insights de desempenho".
Emular sensores do dispositivo.
Emular autenticadores.

Referência de configurações