Use o painel Origens do Chrome DevTools para:
- Veja os arquivos.
- Editar CSS e JavaScript.
- Crie e salve snippets de JavaScript, que podem ser executados em qualquer página. Os snippets são semelhantes aos favoritos.
- Depurar o JavaScript.
- Configure um espaço de trabalho para que as alterações feitas no DevTools sejam salvas no código no sistema de arquivos.
Mostrar arquivos
Use o painel Páginas para visualizar todos os recursos que a página carregou.
Como o painel Página é organizado:
- O nível superior, como
topna captura de tela acima, representa um frame HTML. Você encontrarátopem todas as páginas que visitar.toprepresenta o frame do documento principal. - O segundo nível, como
developers.google.comna captura de tela acima, representa uma origem. - O terceiro nível, o quarto nível e assim por diante representam diretórios e recursos que foram carregados
dessa origem. Por exemplo, na captura de tela acima, o caminho completo para o recurso
devsite-googler-buttonédevelopers.google.com/_static/19aa27122b/css/devsite-googler-button.
Clique em um arquivo no painel Page para ver o conteúdo dele no painel Editor. É possível visualizar qualquer tipo de arquivo. No caso de imagens, a visualização é exibida.
Editar CSS e JavaScript
Use o painel Editor para editar CSS e JavaScript. O DevTools atualiza a página para executar o novo código.
O Editor também ajuda na depuração. Por exemplo, ela sublinha e mostra dicas de erros inline ao lado de erros de sintaxe e outros problemas, como instruções CSS @import e url() com falha e atributos HTML href com URLs inválidos.
Se você editar o background-color de um elemento, vai perceber que a mudança entra em vigor
imediatamente.
Para que as alterações de JavaScript sejam aplicadas, pressione Command+S (Mac) ou Control+S (Windows, Linux). O DevTools não executa novamente um script, então as únicas mudanças de JavaScript que entram em vigor são aquelas que você faz dentro das funções. Por exemplo, observe como console.log('A') não é executado, mas console.log('B') sim.
Se o DevTools executasse novamente todo o script depois de fazer a mudança, o texto A seria registrado no
Console.
O DevTools apaga as alterações de CSS e JavaScript quando você atualiza a página. Consulte Configurar um espaço de trabalho para saber como salvar as alterações no sistema de arquivos.
Criar, salvar e executar snippets
Snippets são scripts que você pode executar em qualquer página. Imagine que você digite repetidamente o código abaixo no Console para inserir a biblioteca jQuery em uma página e poder executar comandos jQuery no Console:
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);
Em vez disso, você pode salvar esse código em um Snippet e executá-lo com alguns cliques no botão sempre que precisar. O DevTools salva o snippet no seu sistema de arquivos. Por exemplo, examine um Snippet que insere a biblioteca jQuery em uma página.
Para executar um snippet:
- Abra o arquivo no painel Snippets e clique em Run
na barra de ações na parte de baixo. - Abra o Menu de comando, exclua o caractere
>, digite!, digite o nome do snippet e pressione Enter.
Consulte Executar snippets de código em qualquer página para saber mais.
Depurar o JavaScript
Em vez de usar console.log() para inferir onde o JavaScript está com problemas, considere usar as
ferramentas de depuração do Chrome DevTools. A ideia geral é definir um ponto de interrupção, que é um ponto de parada intencional no código, e percorrer a execução dele, uma linha por vez.
Ao percorrer o código, é possível visualizar e alterar os valores de todas as propriedades e variáveis definidas no momento, executar JavaScript no Console e muito mais.
Consulte Começar a usar a depuração do JavaScript para aprender os conceitos básicos da depuração no DevTools.
Concentre-se apenas no seu código
O Chrome DevTools permite se concentrar apenas no código que você criou, filtrando o ruído gerado por estruturas e ferramentas de compilação que você utiliza ao criar aplicativos da Web.
Para oferecer uma experiência moderna de depuração da Web, o DevTools faz o seguinte:
- Separa o código criado e implantado. Para ajudar você a encontrar seu código mais rapidamente, o painel Sources separa o código criado do código empacotado e minificado.
- Ignora códigos de terceiros conhecidos:
- O painel Origens oculta essas fontes da árvore de arquivos no painel Página.
- O Console oculta esses frames dos stack traces.
- O menu Abrir arquivo oculta esses arquivos dos resultados da pesquisa.
Além disso, se compatível com frameworks, a pilha de chamadas no depurador e os stack traces no Console mostram o histórico completo das operações assíncronas.
Para saber mais, veja:
Configurar um espaço de trabalho
Por padrão, quando você edita um arquivo no painel Origens, essas mudanças são perdidas quando você recarrega a página. Os espaços de trabalho permitem salvar as alterações feitas no DevTools no sistema de arquivos. Essencialmente, isso permite usar o DevTools como editor de código.
Consulte Editar arquivos com espaços de trabalho para começar.