Executar snippets do JavaScript

Kayce Basques

Sofia Emelianova

Se você executar o mesmo código no Console repetidamente, salve o código como um snippet. Os snippets têm acesso ao contexto 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.

Observação: as Ferramentas do desenvolvedor armazenam snippets como suas preferências locais. O DevTools não sincroniza snippets com configurações, e eles não podem ser acessados pelo sistema de arquivos.

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

Este é o código-fonte do snippet que registra algumas 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 Run, a gaveta Console aparece para mostrar a mensagem Hello, Snippets! que o snippet registra e o conteúdo da página muda.

Abrir o painel "Trechos"

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

1. Navegue até Origens > > Snippets.

   

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.

   

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

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.

3. Insira um nome para o snippet e pressione Enter para salvar.

   

Criar um snippet no menu de comando

1. Foque o cursor em qualquer lugar dentro 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.

   

Consulte Renomear snippets se quiser dar um nome personalizado ao seu 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.

   

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

   

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

Executar snippets

Assim como na criação de um snippet, você pode 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 Origens abre o arquivo no Editor de código.

3. Clique em Run na barra de ações na parte de baixo do editor ou pressione Control+Enter (Windows/Linux) ou Command+Enter (Mac).

   

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 pelo nome do snippet que você quer executar.

   

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.