5 Bookmarklets Úteis para Desenvolvedores

Um bookmarklet é um favorito cuja URL é uma única linha de JavaScript prefixada com javascript:, de modo que ao clicar nele, esse código é executado na página atual em vez de navegar para outro lugar. Isso torna os bookmarklets a forma mais rápida de editar uma página ao vivo, depurar layouts, revelar campos mascarados ou capturar uma cor — sem extensões, sem painel do DevTools, sem etapa de build. Este artigo apresenta cinco bookmarklets genuinamente úteis e prontos para uso, explica quando recorrer a cada um deles e aborda os problemas que costumam surpreender os desenvolvedores (parsing de linha única, bloqueio por Content-Security-Policy, limitações de same-origin) antes de mostrar como criar os seus próprios.

Instale qualquer um deles de duas formas: crie um novo favorito e cole o código javascript: como URL, ou arraste um link cujo href seja o código para a barra de favoritos. Cada trecho abaixo já está em uma única linha — cole-o como está.

1. Edite qualquer página ao vivo com o design mode

Transforme a página inteira em um documento editável para testar textos, espaçamentos e layouts em um site ao vivo sem abrir o DevTools:

javascript:document.designMode="on";void 0;

Definir document.designMode como "on" torna o documento inteiro editável — o mesmo efeito que contenteditable="true", mas aplicado à página toda em vez de a um único elemento. Clique em qualquer título ou parágrafo e comece a digitar. Recorra a isso quando um stakeholder perguntar “e se esse botão dissesse X” ou quando você quiser verificar se um nome de produto mais longo quebra a barra de navegação, sem precisar tocar no código.

O void 0 no final é importante. Uma URL javascript: que termina em uma string é tratada como um documento HTML para o qual o navegador navega; void 0 força um valor de conclusão que não é uma string, mantendo a página no lugar. Prefere editar apenas uma região? Substitua por javascript:void(document.body.contentEditable=true).

2. Colorize cada elemento para depurar o layout

Visualize os limites de cada elemento de uma vez — indispensável para identificar overflow, desalinhamentos e margens indesejadas:

javascript:document.querySelectorAll("*").forEach(e=>e.style.background="rgb(0 0 0 / 10%)");void 0;

Isso aplica um fundo preto com 10% de opacidade a cada elemento da página. Como as camadas semitransparentes se acumulam, elementos aninhados ficam progressivamente mais escuros, permitindo que você leia visualmente a profundidade do DOM e identifique imediatamente qual contêiner é mais largo que seu pai. Se preferir bordas nítidas em vez de preenchimentos sombreados, substitua a linha de background por um outline: e.style.outline="1px solid rgb(255 0 0 / 40%)". Outlines não afetam o layout — ao contrário das bordas, eles não ocupam espaço no box model — portanto a geometria da página que você está depurando permanece intacta.

3. Revele campos de senha mascarados

Converta todos os campos de senha para texto simples:

javascript:(()=>{document.querySelectorAll('input[type=password]').forEach(el=>el.type='text')})();

Esse bookmarklet percorre todos os input[type=password] e altera seu type para text, expondo o valor atual. Recorra a ele ao depurar um formulário de autenticação, verificar o que um gerenciador de senhas ou o preenchimento automático do navegador realmente inseriu, ou confirmar que um texto colado não trouxe um espaço extra no final. Ele lê o DOM ao vivo da mesma forma que um depurador interno à página faria — replays de sessões com fluxos de login quebrados frequentemente revelam que o preenchimento automático inseriu um valor sutilmente errado, e esta é a forma manual mais rápida de confirmar esse tipo de bug.

4. Capture qualquer cor na tela com o eyedropper nativo

Selecione qualquer pixel na tela e obtenha seu valor hexadecimal:

javascript:void(async()=>{try{prompt('HEX:',(await new EyeDropper().open()).sRGBHex)}catch(e){alert(e)}})()

Esse bookmarklet chama a EyeDropper API, que transforma o cursor em uma lupa seletora; a cor selecionada é retornada como sRGBHex e exibida em um prompt de onde você pode copiá-la. Uma ressalva importante: a EyeDropper API é exclusiva do Chromium (Chrome e Edge), disponível apenas em contextos seguros (HTTPS), e Firefox e Safari não oferecem suporte a ela até 2026. Ela também exige interação do usuário — open() lança uma exceção a menos que seja acionado por uma ativação transitória do usuário — mas o clique em um bookmarklet é um gesto do usuário, portanto funciona corretamente. O bloco try/catch captura a rejeição que ocorre caso você pressione Esc em vez de selecionar uma cor.

5. Injete o DevTools mobile com eruda

Obtenha um console completo e um inspetor de DOM em qualquer página — inclusive em um celular sem DevTools:

javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/eruda';s.onload=function(){eruda.init()};document.head.appendChild(s)})();

Esse bookmarklet adiciona um <script> que carrega o eruda — um console para navegadores mobile cuja versão estável atual é a 3.4.3 — e chama eruda.init() assim que ele é carregado, exibindo um painel de DevTools flutuante sobre a página. É a opção mais indicada para depurar em dispositivos reais onde não é possível conectar um inspetor desktop. Dois pontos importantes: a URL sem versão fixa cdn.jsdelivr.net/npm/eruda sempre serve o build mais recente publicado, e o ritmo de lançamentos do eruda está estagnado (sem nova versão no npm há mais de um ano), portanto trate-o como estável, mas sem manutenção ativa. Por carregar um script externo, esse bookmarklet está sujeito à limitação de CSP descrita a seguir.

Por que meu bookmarklet não está funcionando?

Quatro modos de falha explicam quase todos os casos de “simplesmente não funciona”:

O caso do CSP é o mais importante de entender: em um site com uma Content-Security-Policy restrita — experimente o bookmarklet do eruda no GitHub versus em uma página permissiva e observe a diferença — o console simplesmente não aparece, e uma violação de CSP é registrada no console (real). A navegação por javascript: também pode ser bloqueada pelo script-src.

Como escrever seu próprio bookmarklet?

Para criar seu próprio bookmarklet, envolva seu código em uma IIFE dentro de uma URL javascript: e finalize expressões que manipulam o DOM com void 0 para que a página não navegue para um valor de retorno convertido em string:

javascript:(function(){/* your code here */})();

A IIFE mantém suas variáveis fora do escopo global da página, e javascript:foo() é convencionalmente prefixado com void para evitar navegação acidental caso a chamada retorne uma string. Escreva e depure a lógica no console do DevTools primeiro, depois colapse tudo em uma linha — removendo os comentários // — e cole como URL do favorito. Tudo o que você pode digitar no console, você pode carregar como um bookmarklet de um clique.

Perguntas Frequentes

Por que meu bookmarklet para de funcionar no meio do código?

Um bookmarklet é uma única linha, portanto um comentário de linha // silencia todos os caracteres após ele, incluindo suas chaves de fechamento e chamadas de função. Substitua quaisquer comentários // por comentários de bloco /* */, ou remova-os completamente. Ao condensar código multi-linha do console em um bookmarklet, remova todos os comentários // primeiro, pois a quebra de linha que normalmente os encerraria não existe em uma linha única.

Qual é a diferença entre designMode e contentEditable em um bookmarklet?

Definir document.designMode como 'on' torna o documento inteiro editável em uma única instrução, enquanto contentEditable é definido por elemento, portanto document.body.contentEditable = true edita apenas a região do body. Use designMode quando quiser clicar em qualquer título, parágrafo ou botão em toda a página; use contentEditable quando quiser restringir a edição a um único contêiner e manter o restante da página fixo.

O bookmarklet do EyeDropper funciona no Firefox ou Safari?

Não. A EyeDropper API é exclusiva do Chromium, funcionando no Chrome e no Edge e apenas via HTTPS em um contexto seguro; Firefox e Safari não oferecem suporte a ela até 2026. A API também exige uma ativação transitória do usuário, mas o clique em um bookmarklet conta como um gesto do usuário, portanto open() funciona corretamente quando acionado dessa forma. Em navegadores sem suporte, o bookmarklet lança uma exceção porque o construtor EyeDropper é indefinido.

Um bookmarklet pode fazer requisições fetch cross-origin?

Não livremente. Uma chamada fetch() dentro de um bookmarklet é executada no contexto da página atual, portanto está sujeita à política de same-origin e à diretiva connect-src do CSP do site. Requisições para uma origem diferente são bloqueadas a menos que o endpoint envie os cabeçalhos CORS corretos. Restrinja as chamadas de rede do bookmarklet ao mesmo origin da página ou a APIs com CORS habilitado; não há solução no lado do cliente para a política de um site.