Executar snippets do JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Se você perceber que o mesmo código está sendo executado várias vezes no Console, salve-o como um snippet. Os snippets têm acesso ao contexto do JavaScript da página. Eles são uma alternativa aos bookmarklets.

É possível criar snippets no painel Fontes e executá-los em qualquer página e no modo de navegação anônima.

Por exemplo, a captura de tela abaixo mostra a página inicial da documentação do DevTools à esquerda e um código-fonte do snippet no painel Sources > Snippets à direita.

A página inicial da documentação do DevTools antes de executar o snippet. O botão "Run" está destacado.

Veja o código-fonte do snippet que registra mensagens e substitui o corpo HTML da página inicial por um elemento <p> que contém a mensagem:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Quando você clica no botão Execute. Executar, a gaveta do Console é exibida para exibir a mensagem Hello, Snippets! registrada pelo snippet, e o conteúdo da página é alterado.

A página inicial depois de executar o snippet.

Abrir o painel de snippets

O painel Snippets lista os snippets. Para editar um snippet, abra-o de duas maneiras:

  1. Navegue até Fontes &gt; Mais guias. &gt; Snippets.

    O menu &quot;Mais guias&quot; no painel &quot;Origens&quot;.

  2. No menu de comando:

    1. Pressione Control + Shift + P (Windows/Linux) ou Command + Shift + P (Mac) para abrir o menu de comando.
    2. Comece a digitar Snippets, selecione Mostrar snippets e pressione Enter.

    Seleção de &quot;Mostrar snippets&quot; no menu de comando.

O painel Fontes&gt;Snippets mostra uma lista de snippets que você salvou, vazios neste exemplo.

Um painel de snippets vazio.

Criar snippets

É possível criar snippets no painel Snippets ou executando o comando correspondente no Menu de comando em qualquer lugar do DevTools.

O painel Snippets classifica os snippets em ordem alfabética.

Criar um snippet no painel Origens

  1. Abra o painel Snippets.
  2. Clique em Novo snippet. Novo snippet.
  3. Insira um nome para o snippet e pressione Enter para salvar.

    Nomear um snippet.

Criar um snippet no menu de comando

  1. Foque o cursor em qualquer lugar do DevTools.
  2. Pressione Control + Shift + P (Windows/Linux) ou Command + Shift + P (Mac) para abrir o menu de comando.
  3. Comece a digitar Snippet, selecione Criar novo snippet e pressione Enter para executar o comando.

    Selecionando &quot;Criar novo snippet&quot; no menu de comando.

Consulte Renomear snippets se quiser dar um nome personalizado ao novo snippet.

Editar snippets

  1. Abra o painel Snippets.
  2. No painel Snippets, clique no nome do snippet que você quer editar. O painel Sources o abre no Code Editor.

    Um snippet é aberto no editor de código.

  3. Use o editor de código para modificar o código no seu snippet. Um asterisco ao lado do nome do snippet significa que você ainda não salvou as alterações.

    Um asterisco ao lado do nome do snippet que indica o código não salvo.

  4. Pressione Control+S (Windows/Linux) ou Command+S (Mac) para salvar.

Executar snippets

Assim como na criação de um snippet, é possível executá-lo no painel Snippets e no Menu de comando.

Executar um snippet no painel Origens

  1. Abra o painel Snippets.
  2. Clique no nome do snippet que você quer executar. O painel Sources o abre no Code Editor.
  3. Clique em Execute. Run na barra de ações na parte de baixo do editor. ou pressione Control+Enter (Windows/Linux) ou Command+Enter (Mac).

    O botão &quot;Executar&quot;.

Executar um snippet no menu de comando

  1. Foque o cursor em qualquer lugar do DevTools.
  2. Pressione Control + O (Windows/Linux) ou Command + O (Mac) para abrir o menu de comando.
  3. Digite o caractere ! seguido do nome do snippet que você quer executar.

    Executar um snippet no menu &quot;Abrir&quot;.

  4. Pressione Enter para executar o snippet.

Renomear snippets

  1. Abra o painel Snippets.
  2. Clique com o botão direito do mouse no nome do snippet e selecione Renomear.

Excluir snippets

  1. Abra o painel Snippets.
  2. Clique com o botão direito do mouse no nome do snippet e selecione Remover.