Visão geral do painel Origens

Kayce Basques
Kayce Basques
X GitHub Falha
Sofia Emelianova
Sofia Emelianova
GitHub

Use o painel Sources para conferir e editar os recursos do seu site, como folhas de estilo, arquivos JavaScript e imagens.

Visão geral

No painel Origens, é possível fazer o seguinte:

Abrir o painel "Origens"

Para abrir o painel "Origens", siga estas etapas:

  1. Abra o DevTools.
  2. Abra o menu de comando pressionando:
    • macOS: Command+Shift+P
    • Windows, Linux e ChromeOS: Ctrl+Shift+P
  3. Comece a digitar sources, selecione Mostrar painel de fontes e pressione Enter.

Como alternativa, no canto superior direito, selecione more_vert Mais opções > Mais ferramentas > Origens.

Mostrar arquivos

Clique na guia Página para conferir todos os recursos que a página carregou.

Guia "Página".

Como a guia Página é organizada:

  • O nível superior, como top na captura de tela acima, representa um frame HTML. Você vai encontrar top em todas as páginas que visitar. top representa o frame do documento principal.
  • O segundo nível, como developers.google.com na 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 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 na guia Página para conferir o conteúdo dele na guia Editor. Você pode acessar qualquer tipo de arquivo. Para imagens, você vê uma visualização da imagem.

Visualização de um arquivo na guia "Editor".

Editar CSS e JavaScript

Clique na guia 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, ele sublinha e mostra dicas de erros inline ao lado de erros de sintaxe e outros problemas, como instruções CSS @import e url() com falhas e atributos HTML href com URLs inválidos.

Uma dica de erro de sintaxe inline.

Se você editar o background-color de um elemento, a mudança vai entrar em vigor imediatamente.

Como editar CSS na guia "Editor".

Para as alterações de JavaScript entrarem em vigor, pressione Command+S (Mac) ou Control+S (Windows, Linux). O DevTools não executa novamente um script. Portanto, as únicas alterações de JavaScript que aparecem são aquelas que você faz dentro das funções. Por exemplo, observe como console.log('A') não é executado, enquanto console.log('B') é.

Como editar JavaScript na guia "Editor".

Se o DevTools gerasse novamente todo o script depois de fazer a mudança, 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 Configurar um espaço de trabalho para saber como 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 repetidamente 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);

Em vez disso, você pode salvar esse código em um fragmento e executá-lo com alguns cliques do botão sempre que precisar. O DevTools salva o Snippet no sistema de arquivos. Por exemplo, examine um snippet que insere a biblioteca jQuery em uma página.

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

Para executar um Snippet:

  • Abra o arquivo na guia Snippets e clique em Executar O botão "Run". na barra de ações na parte de baixo.
  • Abra o Command Menu, 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 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.

Pausa em um ponto de interrupção.

Ao acessar o código, você pode conferir e alterar os valores de todas as propriedades e variáveis definidas, executar o JavaScript no Console e muito mais.

Consulte Introdução à depuração do JavaScript para aprender os conceitos básicos da depuração no DevTools.

Concentre-se apenas no código

O Chrome DevTools permite que você se concentre apenas no código que você cria, filtrando o ruído gerado por frameworks e ferramentas de build que você usa ao criar aplicativos da Web.

Para oferecer a experiência moderna de depuração da Web, as DevTools fazem o seguinte:

Além disso, se houver suporte de 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, ao editar um arquivo no painel Sources, essas alterações são perdidas quando você recarrega a página. Os espaços de trabalho permitem salvar as alterações feitas no DevTools no seu sistema de arquivos. Essencialmente, isso permite que você use o DevTools como seu editor de código.

Consulte Editar arquivos com o Workspaces para começar.