Visão geral do painel Origens

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Visão geral

O painel Origens permite que você faça o seguinte:

Abrir o painel "Origens"

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

  1. Abra o DevTools.
  2. Abra o menu de comandos pressionando:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. Comece a digitar sources, selecione Mostrar painel "Origens" 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 carregados pela página.

A guia "Página".

Como a guia Página está 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 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. É possível visualizar qualquer tipo de arquivo. Para imagens, você verá uma prévia.

Como visualizar 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 ferramentas de erro inline ao lado de erros de sintaxe e outros problemas, como instruções @import e url() de CSS com falha e atributos href HTML com URLs inválidos.

Uma dica de erro de sintaxe inline.

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

Edição de CSS na guia "Editor".

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

Editar JavaScript na guia "Editor".

Se o DevTools executasse o script inteiro novamente após fazer a mudança, o texto A teria sido registrado no console.

O DevTools apaga as mudanças de CSS e JavaScript quando você recarrega a página. Consulte Configurar um espaço de trabalho para saber como salvar as mudanças no sistema de arquivos.

Criar, salvar e executar snippets

Os snippets são scripts que podem ser executados em qualquer página. Imagine que você digite repetidamente o código a seguir no console para inserir a biblioteca jQuery em uma página, para que você possa 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 de 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 "Executar". na barra de ações na parte de baixo.
  • Abra o menu de comandos, 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 seu 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 local de parada intencional no código, e avançar na execução do código, uma linha por vez.

Pausando em um ponto de interrupção.

Ao avançar no código, é possível visualizar e mudar os valores de todas as propriedades e variáveis definidas no momento , executar JavaScript no console e muito mais.

Consulte Introdução à depuração de JavaScript para aprender os princípios 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 criado, filtrando o ruído gerado por frameworks e ferramentas de build que você usa ao criar aplicativos da Web.

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

Além disso, se forem compatíveis com frameworks, a pilha de chamadas no depurador e rastreamentos de pilha no console mostram o histórico completo de 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 mudanças feitas no DevTools no sistema de arquivos. Essencialmente, isso permite que você use o DevTools como editor de código.

Consulte Editar arquivos com espaços de trabalho para começar.