Já reparou que está sempre a copiar o mesmo JavaScript para a consola das DevTools? Um snippet de depuração, extrair dados de uma página, uma modificação rápida do DOM, e sempre que tem de o escrever manualmente ou colar a partir de um bloco de notas.

As Chrome DevTools têm um editor de snippets integrado no separador Sources há vários anos. Escreve o script uma vez, dá-lhe um nome e executa-o em qualquer página com um único clique ou atalho. Funciona mais rápido do que um bookmarklet e não requer extensões.

Vamos percorrer todo o ciclo passo a passo: desde abrir o painel Snippets até exemplos práticos prontos a usar que pode aproveitar.

💡 Visão geral rápida:

• Abra o painel Snippets através do separador Sources ou do menu de comandos
• Crie um novo snippet e atribua-lhe um nome significativo
• Escreva JavaScript no editor de código e guarde com Ctrl+S
• Execute o snippet com o botão Run ou através do menu de comandos com !
• Percorra exemplos práticos: limpar uma página, recolher dados, modificar estilos

O que são snippets e porque precisa deles

Um snippet é um fragmento de JavaScript guardado diretamente nas Chrome DevTools. Ao contrário do código na consola, não desaparece quando recarrega a página ou fecha o navegador; permanece no separador Sources à espera de ser executado.

A principal vantagem em relação à consola: um snippet é executado no contexto da página atual e tem acesso total ao seu DOM, variáveis e APIs. Pode escrever um script para extrair dados de qualquer site, modificar o layout ou automatizar tarefas rotineiras e executá-lo sempre que quiser, sem ter de o reescrever.

Uma abordagem alternativa são os bookmarklets (marcadores com javascript: no URL), mas estes são limitados pelo comprimento do URL e são inconvenientes para código com várias linhas. No Firefox, o equivalente era o Scratchpad, mas foi removido do navegador a partir da versão 70 e substituído pelo editor de consola multilinha.

Veja este pequeno tutorial em vídeo sobre snippets; está em inglês, mas todas as ações são mostradas no ecrã e correspondem exatamente aos passos descritos abaixo.

Eis o aspeto de um fluxo de trabalho típico com snippets: a captura de ecrã mostra a página original à esquerda e o código no editor à direita.

O código fonte deste exemplo faz três coisas: regista uma mensagem na consola, limpa o document.body e insere um novo parágrafo:

1
console.log('Hello, Snippets!');
2
document.body.innerHTML = '';
3
var p = document.createElement('p');
4
p.textContent = 'Hello, Snippets!';
5
document.body.appendChild(p);

Após a execução, a página muda completamente: Hello, Snippets! aparece na consola e o conteúdo do body é substituído por um único parágrafo.

Como abrir o painel de snippets

O painel Snippets está dentro do separador Sources. Há duas formas de lá chegar: com o rato e através do menu de comandos.

Método um: com o rato

Abra as DevTools (F12 ou Ctrl+Shift+I) e vá ao separador Sources (Origens). À esquerda, verá o painel Page (Página) com a árvore de ficheiros da página; está aberto por predefinição.

Clique no separador Snippets (Fragmentos) na mesma coluna à esquerda. Se o separador não estiver visível, clique na seta More tabs (>>) (Mais separadores); abrirá uma lista suspensa com os separadores ocultos, incluindo Snippets.

Método dois: menu de comandos

O menu de comandos é a forma mais rápida de navegar nas DevTools se se lembrar do atalho.

• Coloque o foco em qualquer ponto dentro das DevTools.
• Prima Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac) para abrir o menu de comandos.
• Comece a escrever snippets e selecione Show Snippets (Mostrar Fragmentos) e prima Enter.

Criar um novo fragmento

O painel Snippets está aberto; vamos agora adicionar o primeiro script.

Através do painel Sources

No painel Snippets, clique no botão New snippet (Novo fragmento). Introduza o nome do fragmento e prima Enter; aparecerá na lista à esquerda.

O nome deve ser significativo; daqui a um mês não se lembrará do que faz o snippet-3. Escreva "limpar-pagina-e-log", "extrair-precos-produtos" ou "alternar-modo-escuro".

Através do menu de comandos

O mesmo atalho Ctrl+Shift+P / Cmd+Shift+P, mas agora escreva snippet e selecione Create new snippet (Criar novo fragmento) e depois Enter.

O novo fragmento é criado com um nome predefinido; renomeie-o clicando com o botão direito e selecionando Rename (Renomear).

Editar o código do fragmento

Clique no nome do fragmento no painel esquerdo; o editor de código abrirá à direita. Este é um editor completo com realce de sintaxe, números de linha e autocompletar para JavaScript.

Escreva o código como faria em qualquer editor. Todas as APIs padrão do navegador estão disponíveis: objetos document e window, funções fetch e console, armazenamento localStorage. O conjunto completo daquilo que a página vê.

Quando o código não está guardado, aparece um asterisco ao lado do nome do fragmento. Guardar: Ctrl+S (Windows/Linux) ou Cmd+S (Mac).

Use Ctrl+Z / Cmd+Z para desfazer; o histórico de alterações funciona dentro da sessão de edição.

Executar um fragmento

Com o botão Run no painel Sources

Abra o fragmento desejado no editor. Clique no botão Run (Executar) (ícone Play) na parte inferior do painel:

Ou prima Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). O fragmento será executado no contexto da página atualmente aberta.

Através do menu de comandos com um ponto de exclamação

Abra o menu de comandos (Ctrl+Shift+P / Cmd+Shift+P), apague o símbolo >, escreva ! e comece a introduzir o nome do fragmento. As DevTools mostrarão as opções correspondentes:

Selecione a que precisa e prima Enter. Este método é conveniente quando não quer mudar para o separador Sources.

Renomear e eliminar

Ambas as operações são feitas no painel Snippets, clicando com o botão direito no nome do fragmento:

• Rename (Renomear): define um novo nome,
• Remove (Remover): elimina o fragmento permanentemente.

A eliminação não pede confirmação, por isso tenha cuidado. Antes de eliminar um script complexo, copie o código para um ficheiro de texto.

Exemplos práticos de fragmentos

Cobrimos a teoria; agora aqui estão vários scripts prontos a usar que pode copiar, guardar como fragmento e utilizar de imediato.

Limpar uma página para uma captura de ecrã

Remove todo o conteúdo e insere um fundo branco limpo, útil ao tirar capturas de ecrã para um portefólio ou documentação:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Recolher todos os links de uma página

Extrai todos os URLs e apresenta-os na consola como uma lista. Útil para auditar uma página ou recolher dados:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Modo escuro em qualquer site

Aplica inversão a toda a página, funciona mesmo onde não existe um tema escuro incorporado:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Destacar todos os botões numa página

Contorna cada <button> e input[type="submit"] com uma borda vermelha, conveniente para verificar o layout:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Todos estes snippets podem ser combinados e ampliados para as suas próprias tarefas. Guarde uma vez, utilize durante anos.

⁉️🤔 Perguntas frequentes

Onde ficam fisicamente guardados os snippets do Chrome DevTools?

Os snippets são guardados no perfil do Chrome, no ficheiro Preferences (JSON), no caminho %LocalAppData%\Google\Chrome\User Data\Default\Preferences no Windows ou ~/Library/Application Support/Google/Chrome/Default/Preferences no Mac. NÃO são sincronizados através da conta Google; quando muda de computador ou reinstala o navegador, os snippets perdem-se. Para os transferir manualmente, copie a secção devtools.preferences.snippets de um ficheiro Preferences para outro com o navegador fechado.

Em que é que um snippet difere de um bookmarklet?

Um bookmarklet é um marcador com um URL que começa por javascript:, limitado pelo tamanho do URL (cerca de 2000 caracteres) e pouco prático de editar. Um snippet é um editor completo dentro do DevTools, sem limites de tamanho, com realce de sintaxe e persistência entre sessões. Um snippet também pode ser executado com o atalho Ctrl+Enter sem tirar as mãos do teclado.

É possível executar um snippet automaticamente ao carregar a página?

Não diretamente. Um snippet requer sempre execução manual. Se precisar de automação no carregamento, utilize uma extensão do Chrome (content script) ou o Tampermonkey/Violentmonkey com userscripts; estes são acionados no evento de carregamento da página e não requerem intervenção manual.

Como faço uma cópia de segurança dos meus snippets antes de reinstalar o Chrome?

Abra o DevTools, vá a Sources → Snippets, clique com o botão direito em cada snippet e selecione Save as; isto guarda um ficheiro .js no disco. Em alternativa, abra chrome://version/, localize o caminho do perfil, feche o Chrome e copie a secção JSON devtools.preferences.snippets do ficheiro Preferences.

Porque é que o meu snippet não vê as variáveis da consola?

Um snippet é executado no seu próprio âmbito; não tem acesso a variáveis declaradas na consola via var/let/const no âmbito global. Para passar dados, atribua um valor diretamente a window: window.myData = {...} na consola e depois leia window.myData no snippet. Ou ao contrário: o snippet pode definir dados em window e a consola pode lê-los.

Vale a pena aprender snippets em 2026?

Os snippets são uma daquelas ferramentas que não mudam durante anos, mas que aceleram radicalmente o trabalho rotineiro se não se esquecer deles. Cinco minutos gastos a criar um script para recolher links ou limpar uma página poupam dezenas de operações manuais todos os meses.

Comece com três snippets simples: recolher dados de tabelas numa página, limpeza rápida do DOM para capturas de ecrã e destacar um elemento por seletor. Guarde-os e, da próxima vez que precisar de extrair dados de um site de terceiros ou verificar o layout, despacha o assunto em segundos em vez de passar meia hora a copiar e colar.

Apenas não se esqueça de fazer cópia de segurança: os snippets não são sincronizados entre dispositivos e, sem uma cópia do ficheiro Preferences, desaparecem quando reinstalar o sistema.