
DevTools
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.
Abrir DevTools
Todas as maneiras de abrir o Chrome DevTools.
Novidades do DevTools
Fique por dentro das mudanças mais recentes do DevTools.
Dicas do DevTools
Uma série de vídeos curtos para você aprender sobre os recursos do DevTools.
Comandos e atalhos
Realizar tarefas com rapidez.
Executar comandos no menu de comando
Um guia sobre como abrir o menu de comando, executar comandos, abrir arquivos, ver outras ações e muito mais.
Atalhos do teclado
A documentação canônica para atalhos de teclado do Chrome DevTools.
Desativar o JavaScript
Confira a aparência e o comportamento de uma página da Web quando o JavaScript está desativado.
Simular dispositivos móveis com o Device Mode
Use dispositivos virtuais no Device Mode do Chrome para criar sites móveis.
Pesquisar nos recursos carregados
Encontre texto em todos os recursos carregados com a guia Pesquisar.
Painéis
Conheça o poder de cada painel do DevTools.
Elementos - DOM
Saiba como ver e mudar o DOM de uma página usando o Chrome DevTools.
Elementos: CSS
Saiba como visualizar e mudar o CSS de uma página usando o Chrome DevTools.
Console
Registre mensagens e execute o JavaScript.
Fontes
Veja e edite arquivos, crie snippets, depure o JavaScript e configure um espaço de trabalho.
Rede
Registre solicitações de rede.
Performance
Avalie o desempenho do site com o DevTools.
Memória
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.
Aplicativo
Inspecione, modifique e depure apps da Web, teste o cache e visualize o armazenamento.
Gravador
Gravar, repetir, medir os fluxos de usuários e editar as etapas.
Renderização
Descubra um conjunto de opções que afetam a renderização de conteúdo da Web.
Problemas
Encontre e corrija problemas no seu site.
Segurança
Use o painel "Segurança" para garantir que a página esteja totalmente protegida por HTTPS.
Inspetor de memória
Inspecione um ArrayBuffer, uma TypedArray ou um DataView no JavaScript, além do WebAssembly e da memória de apps Wasm em C++.
Condições da rede
Substitua a string do user agent. Desative a opção "Selecionar automaticamente" e escolha da lista ou insira uma string personalizada.
Mídia
Use o painel "Mídia" para ver informações e depurar os players de mídia por guia do navegador.
Animações
Inspecionar e modificar animações com a guia "Animations".
Mudanças
Acompanhar alterações em HTML, CSS e JavaScript.
Cobertura
Encontre e analise códigos JavaScript e CSS não utilizados no Chrome DevTools.
Recursos do desenvolvedor
Use a guia da gaveta "Recursos para desenvolvedores" para verificar se os mapas de origem foram carregados e carregá-los manualmente.
Visão geral do CSS
Identifique possíveis melhorias no CSS com o painel "Visão geral do CSS".
Farol
Otimize a velocidade do site com o painel do Lighthouse.
Insights de desempenho
Receba insights úteis sobre a performance do seu site com o painel "Insights de desempenho".
Sensores
Emular sensores do dispositivo.
WebAuthn
Emular autenticadores.