Use o painel Origens do Chrome DevTools para fazer o seguinte:
- 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 mudanças feitas no DevTools sejam salvas no código do seu arquivo. sistema.
Mostrar arquivos
Use o painel Página para ver 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ê vai encontrartopem cada página que você visita.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 os diretórios e recursos carregados
a partir 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 Página para acessar o conteúdo dele no painel Editor. É possível visualizar qualquer tipo de arquivo. No caso de imagens, você vê uma visualização da imagem.
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 erro 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, a mudança vai entrar em vigor
imediatamente.
Para que as alterações no JavaScript entrem em vigor, pressione Command+S (Mac) ou Control+S (Windows e Linux). O DevTools não executa novamente um script, então as únicas alterações de JavaScript que entram em vigor são as que você faz dentro das funções. Por exemplo, observe que console.log('A') não é executado enquanto console.log('B') é executado.
Se o DevTools executasse novamente todo o script depois de fazer a mudança, o texto A teria sido registrado na
Console.
O DevTools apaga as mudanças de CSS e JavaScript quando você atualiza a página. Consulte Configurar um Workspace para saber como salvar as alterações no seu sistema de arquivos.
Criar, salvar e executar snippets
Snippets são scripts que podem ser executados em qualquer página. Imagine que você digita repetidamente código a seguir no Console, para inserir a biblioteca jQuery em uma página, de modo a pode executar comandos jQuery a partir do 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 a qualquer momento conforme a necessidade. 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 Executar
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á tendo problemas, considere usar a propriedade
Ferramentas de depuração do Chrome DevTools. A ideia geral é definir um ponto de interrupção, que é uma
uma parada intencional no código e, em seguida, percorrer a execução dele, uma linha por
tempo de resposta.
Conforme você percorre o código, pode visualizar e alterar os valores de todas as tabelas definidas no momento propriedades e variáveis, executar JavaScript no Console e muito mais.
Consulte Introdução à depuração do JavaScript para aprender os conceitos básicos da depuração no DevTools.
Focar apenas no seu código
O Chrome DevTools permite que você se concentre apenas no código que cria, filtrando o ruído gerado por frameworks e ferramentas de compilação que você usa ao criar aplicativos da Web.
Para oferecer a você a experiência moderna de depuração na Web, o DevTools faz o seguinte:
- Separa o código criado e implantado. Para ajudar você a encontrar seu código com mais rapidez, o painel Origens separa o código criado do código empacotado e minificado.
- Ignora códigos de terceiros conhecidos:
- O painel Origens as oculta 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íveis 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 Workspace
Por padrão, quando você edita um arquivo no painel Origens, essas mudanças são perdidas quando você recarrega. da página. Os espaços de trabalho permitem salvar em seu arquivo as mudanças feitas no DevTools sistema. Essencialmente, isso permite que você use o DevTools como seu editor de código.
Consulte Editar arquivos com espaços de trabalho para começar.