Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Visão geral do painel Sources

Use o painel Sources do Chrome DevTools para:

Visualizar arquivos

Use o painel Network para visualizar todos os recursos que a página carregou.

O painel Network
Imagem 1. O painel Network

Como o painel Network é organizado:

  • O que aparece em primeiro nível, como top na Imagem 1, representa um frame HTML. Você encontrará top em todas as páginas que visitar. top representa o frame do documento principal.
  • O que aparece em segundo nível, como developers.google.com na 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.

Visualizar um arquivo no painel Editor
Imagem 2. Visualizar o conteúdo de 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.

Editar CSS no painel Editor
Imagem 3. Editar CSS no painel Editor para alterar a cor de fundo de um elemento de azul para vermelho

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.

Editar JavaScript no painel Editor
Imagem 5. Editar JavaScript no painel Editor

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.

Um snippet que insere a biblioteca jQuery em uma página.
Imagem 6. Um snippet que insere a biblioteca jQuery em uma página

Para executar um snippet:

  • Abra o arquivo por meio do painel Snippets e clique em Run O botão 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.

Depurar o JavaScript
Imagem 7. Depurar o JavaScript

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.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.