Se você estiver executando o mesmo código no Console repetidamente, salve o código como um snippet. Eles 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.
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);
Ao clicar 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 Snippets
O painel Snippets lista seus snippets. Para editar um snippet, abra-o de uma das duas maneiras a seguir:
Navegue até Fontes > > Snippets.
No Menu de comando:
- Pressione Control + Shift + P (Windows/Linux) ou Command + Shift + P (Mac) para abrir o Menu de comando.
- Comece a digitar
Snippets
, selecione Mostrar snippets e pressione Enter.
O painel Sources>Snippets mostra uma lista de snippets salvos, vazia neste exemplo.
Criar snippets
Você pode criar snippets no painel Snippets ou executando o comando correspondente no Menu de comandos em qualquer lugar do DevTools.
O painel Snippets classifica os snippets em ordem alfabética.
Criar um snippet no painel Sources
- Abra o painel Snippets.
- Clique em Novo snippet.
Insira um nome para o snippet e pressione Enter para salvar.
Criar um snippet no Menu de comando
- Concentre o cursor em qualquer lugar do DevTools.
- Pressione Control + Shift + P (Windows/Linux) ou Command + Shift + P (Mac) para abrir o Menu de comando.
Comece a digitar
Snippet
, selecione Criar novo snippet e pressione Enter para executar o comando.
Consulte Renomear snippets para dar um nome personalizado ao novo snippet.
Editar snippets
- Abra o painel Snippets.
No painel Snippets, clique no nome do snippet que você quer editar. O painel Sources é aberto no Code Editor.
Use o Editor de código para editar o código do snippet. Um asterisco ao lado do nome do snippet indica que você ainda não salvou as alterações.
Pressione Control + S (Windows/Linux) ou Command + S (Mac) para salvar.
Executar snippets
Semelhante à criação de um snippet, você pode executá-lo no painel Snippets e no Menu de comando.
Executar um snippet no painel Sources
- Abra o painel Snippets.
- Clique no nome do snippet que você quer executar. O painel Sources é aberto no Code Editor.
Clique em Executar na barra de ações na parte de baixo do editor ou pressione Control+Enter (Windows/Linux) ou Command+Enter (Mac).
Executar um snippet do menu de comando
- Concentre o cursor em qualquer lugar do DevTools.
- Pressione Control + O (Windows/Linux) ou Command + O (Mac) para abrir o Menu de comando.
Digite o caractere
!
seguido do nome do snippet que você quer executar.Pressione Enter para executar o snippet.
Renomear trechos
- Abra o painel Snippets.
- Clique com o botão direito do mouse no nome do snippet e selecione Renomear.
Excluir snippets
- Abra o painel Snippets.
- Clique com o botão direito do mouse no nome do snippet e selecione Remover.