O Chrome DevTools é um conjunto de ferramentas para desenvolvedores da Web integrado diretamente ao navegador Google Chrome. O DevTools permite editar páginas e diagnosticar problemas com rapidez, 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.
Abra o menu de comandos, execute comandos, abra arquivos, consulte outras ações e muito mais.
Leia o documento
Uma referência abrangente de atalhos do teclado.
Leia o documento
Confira a aparência e o comportamento de uma página da Web quando o JavaScript está desativado.
Leia o documento
Simule dispositivos para criar sites mobile-first.
Encontre texto em todos os recursos carregados com o painel Pesquisar.

Painéis

Conheça o poder de cada painel do DevTools.
Saiba como visualizar e mudar o DOM de uma página.
Confira a documentação
Saiba como visualizar e mudar o CSS de uma página.
Confira a documentação
Registre mensagens e execute o JavaScript.
Confira a documentação
Confira 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
Avaliar a performance do site
Confira a documentação
Encontre problemas de memória que afetam o desempenho da página, incluindo vazamentos de memória e muito mais.
Confira a documentação
Inspecione, modifique e depure apps da Web, teste o cache, visualize o armazenamento e muito mais.
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
Inspecione e depure endereços salvos.
Encontre e corrija problemas no seu site.
A página precisa estar 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.
Teste seu site bloqueando solicitações de rede.
Confira informações e depure players de mídia por guia do navegador.
Inspecione e modifique animações.
Acompanhar alterações em HTML, CSS e JavaScript.
Encontrar e analisar códigos JavaScript e CSS não utilizados.
Verifique se os mapas de origem foram carregados e carregue-os manualmente.
Identifique possíveis melhorias no CSS.
Otimize a velocidade do site com o painel do Lighthouse.
Receba insights úteis sobre o desempenho do seu site.
Monitore o desempenho de carga e tempo de execução.
Veja e edite arquivos de origem enquanto tem acesso a outros painéis.
Emular sensores do dispositivo.
Veja as métricas da API WebAudio.
Emular autenticadores.

Referência de configurações