Use o painel Sources do Chrome DevTools para:
- visualizar arquivos;
- editar CSS e JavaScript;
- criar e salvar snippets de JavaScript, que podem ser executados em qualquer página. Os snippets são parecidos com bookmarklets;
- depurar o JavaScript;
- definir um espaço de trabalho, para que as alterações que você faça no DevTools sejam salvas no código no seu sistema de arquivos.
Visualizar arquivos
Use o painel Network para visualizar todos os recursos que a página carregou.
Como o painel Network é organizado:
- O que aparece em primeiro nível, como
topna Imagem 1, representa um frame HTML. Você encontrarátopem todas as páginas que visitar.toprepresenta o frame do documento principal. - O que aparece em segundo nível, como
developers.google.comna Imagem 1, representa uma origem. - O que aparece em terceiro nível, quarto nível e assim por diante, representa os diretórios e recursos
carregados a partir daquela origem. Por exemplo, na Imagem 1 o caminho completo para o
recurso
devsite-googler-buttonédevelopers.google.com/_static/f6e16de9fa/css/devsite-googler-button
Clique em um arquivo no painel Network para visualizar seu conteúdo no painel Editor. Você pode visualizar qualquer tipo de arquivo. Para imagens, você vê uma visualização da imagem.
jquery-bundle.js no painel Editor
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. Por exemplo, se editar a background-color de um elemento, você
verá essa mudança em vigor imediatamente.
As mudanças de CSS entram em vigor imediatamente, sem precisar salvar nada. Para as alterações de JavaScript aparecerem, pressione
Command+S (Mac) ou Control+S (Windows, Linux).
O DevTools não executa novamente um script, então as únicas alterações de JavaScript que aparecem são aquelas que
você faz dentro das funções. Por exemplo, na Imagem 4, observe como console.log('A') não
é executado, enquanto console.log('B') é. Se o DevTools gerasse novamente todo o script depois de fazer a
alteração, o texto A teria sido registrado no Console.
O DevTools apaga as alterações de CSS e JavaScript quando você atualiza a página. Consulte Definir um espaço de trabalho para aprender a salvar as alterações no sistema de arquivos.
Criar, salvar e executar snippets
Os snippets são scripts que você pode executar em qualquer página. Imagine que você digita repetidas vezes o código a seguir no Console para inserir a biblioteca jQuery em uma página, de modo que possa executar comandos jQuery a partir desse 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);
Por outro lado, você pode salvar esse código em um snippet e executá-lo com alguns cliques do botão a qualquer momento que precisar. O DevTools salva o snippet no sistema de arquivos.
Para executar um snippet:
- Abra o arquivo por meio do painel Snippets e clique em Run
. - Abra o Command Menu, exclua o
>caractere, digite!e o nome do Snippet. Em seguida, 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á apresentando erros, 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 acessar a execução do código,
uma linha de cada vez. Ao acessar o código, você pode visualizar e alterar os valores de todas as
propriedades e variáveis atualmente definidas, executar o JavaScript no Console e mais.
Consulte Primeiros passos com a depuração do JavaScript para aprender o básico sobre a depuração no DevTools.
Definir um espaço de trabalho
Por padrão, ao editar um arquivo no painel Sources, essas alterações são perdidas quando a página é atualizada. Os espaços de trabalho permitem salvar as alterações feitas no DevTools no sistema de arquivos. Essencialmente, isso permite que você use o DevTools como seu editor de códigos.
Consulte Configurar persistência com os espaços de trabalho do DevTools para dar os primeiros passos.