5 Bookmarklets Útiles para Desarrolladores

Un bookmarklet es un marcador cuya URL es una sola línea de JavaScript con el prefijo javascript:, de modo que al hacer clic se ejecuta ese código en la página actual en lugar de navegar a otra dirección. Esto convierte a los bookmarklets en la forma más rápida de editar una página en vivo, depurar el layout, revelar un campo de contraseña enmascarado u obtener un color — sin extensiones, sin paneles de DevTools, sin pasos de compilación. Este artículo presenta cinco bookmarklets genuinamente útiles y listos para copiar que funcionan en navegadores Chromium actuales, explica cuándo conviene usar cada uno, y cubre los problemas comunes que suelen surgir (análisis de línea única, bloqueo por Content-Security-Policy, límites de mismo origen) antes de mostrar cómo escribir los propios.

Puedes instalar cualquiera de ellos de dos maneras: crea un nuevo marcador y pega el código javascript: como su URL, o arrastra un enlace cuyo atributo href contenga el código hacia la barra de marcadores. Cada fragmento a continuación ya está en una sola línea — pégalo tal cual.

1. Editar cualquier página en vivo con design mode

Convierte toda la página en un documento editable para probar textos, espaciado y layout en un sitio en producción sin abrir DevTools:

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

Establecer document.designMode en "on" hace que todo el documento sea editable — el mismo efecto que contenteditable="true", pero aplicado a la página completa en lugar de a un solo elemento. Haz clic en cualquier encabezado o párrafo y escribe. Recurre a esto cuando un stakeholder pregunta “¿qué pasaría si este botón dijera X?” o cuando quieres verificar si un nombre de producto más largo rompe la barra de navegación, sin tocar el código.

El void 0 al final importa. Una URL javascript: que termina en una cadena de texto es tratada como un documento HTML al que el navegador navega; void 0 fuerza un valor de retorno que no es una cadena, de modo que la página permanece en su lugar. ¿Prefieres editar solo una región? Reemplaza con javascript:void(document.body.contentEditable=true).

2. Colorear cada elemento para depurar el layout

Visualiza los límites de caja de cada elemento de una vez — invaluable para detectar desbordamientos, desalineaciones y márgenes no deseados:

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

Esto aplica un fondo negro con 10% de opacidad a cada elemento de la página. Dado que las capas semitransparentes se acumulan, los elementos anidados se renderizan progresivamente más oscuros, lo que permite leer la profundidad del DOM a simple vista e identificar de inmediato qué contenedor es más ancho que su padre. Si prefieres bordes definidos en lugar de rellenos sombreados, reemplaza la línea del fondo por un outline: e.style.outline="1px solid rgb(255 0 0 / 40%)". Los outlines no afectan el layout — a diferencia de los bordes, no ocupan espacio en el modelo de caja — por lo que la geometría de la página que estás depurando permanece intacta.

3. Revelar campos de contraseña enmascarados

Convierte todos los campos de contraseña a texto plano:

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

Este bookmarklet recorre cada input[type=password] y cambia su type a text, exponiendo el valor actual. Úsalo al depurar un formulario de autenticación, para verificar qué introdujo realmente un gestor de contraseñas o el autocompletado del navegador, o para confirmar que al pegar no se incluyó un espacio al final. Lee el DOM en vivo de la misma manera que lo haría un depurador integrado en la página — las reproducciones de sesión de flujos de inicio de sesión fallidos frecuentemente revelan que el autocompletado escribió un valor sutilmente incorrecto, y esta es la forma manual más rápida de confirmar ese tipo de error.

4. Obtener cualquier color en pantalla con el eyedropper nativo

Selecciona cualquier píxel en pantalla y obtén su valor hexadecimal:

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

Este bookmarklet llama a la EyeDropper API, que convierte el cursor en una lupa-selector; el color seleccionado se devuelve como sRGBHex y aparece en un prompt desde el que puedes copiarlo. Una advertencia importante: la EyeDropper API es exclusiva de Chromium (Chrome y Edge), disponible solo en contextos seguros (HTTPS), y Firefox y Safari no la soportan a partir de 2026. También requiere activación por parte del usuario — open() lanza una excepción si no es activado por una interacción transitoria del usuario — pero el clic en un bookmarklet sí cuenta como un gesto del usuario, por lo que se ejecuta correctamente. El bloque try/catch absorbe el rechazo que se produce si presionas Esc en lugar de seleccionar un color.

5. Inyectar DevTools móvil con eruda

Obtén una consola completa e inspector del DOM en cualquier página — incluso en un teléfono sin 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)})();

Este bookmarklet agrega un <script> que carga eruda — una consola para navegadores móviles cuya versión estable actual es la 3.4.3 — y llama a eruda.init() una vez que se carga, mostrando un panel de DevTools flotante sobre la página. Es la opción destacada para depurar en dispositivos reales donde no es posible conectar un inspector de escritorio. Dos cosas a tener en cuenta: la URL sin versión fija cdn.jsdelivr.net/npm/eruda siempre sirve la última versión publicada, y el ritmo de lanzamientos de eruda se ha estancado (sin nueva versión en npm en más de un año), así que trátalo como estable pero sin mantenimiento activo. Dado que carga un script externo, este bookmarklet está sujeto a la limitación de CSP descrita a continuación.

¿Por qué no se ejecuta mi bookmarklet?

Cuatro modos de fallo explican prácticamente todos los casos de “simplemente no funciona”:

El caso de la CSP es el que conviene interiorizar: en un sitio con una Content-Security-Policy estricta — prueba el bookmarklet de eruda en GitHub frente a una página permisiva y observa la diferencia — la consola simplemente no aparecerá, y en su lugar se registra una violación de CSP en la consola (real). La navegación javascript: en sí también puede ser bloqueada por script-src.

¿Cómo escribir tu propio bookmarklet?

Para escribir tu propio bookmarklet, envuelve tu código en un IIFE dentro de una URL javascript: y termina las expresiones que mutan el DOM con void 0 para que la página no navegue hacia un valor de retorno convertido en cadena:

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

El IIFE mantiene tus variables fuera del scope global de la página, y javascript:foo() se prefija convencionalmente con void para evitar navegaciones accidentales si la llamada devuelve una cadena. Escribe y depura la lógica primero en la consola de DevTools, luego colápsa todo en una línea — eliminando los comentarios // — y pégalo como la URL del marcador. Todo lo que puedas escribir en la consola, puedes llevarlo contigo como un bookmarklet de un solo clic.

Preguntas Frecuentes

¿Por qué mi bookmarklet deja de funcionar a mitad del código?

Un bookmarklet es una sola línea, por lo que un comentario de línea // silencia todos los caracteres que vienen después, incluyendo las llaves de cierre y las llamadas a funciones. Reemplaza cualquier comentario // por comentarios de bloque /* */, o elimínalos por completo. Al colapsar código de consola multilínea en un bookmarklet, elimina primero todos los comentarios //, porque el salto de línea que normalmente los terminaría ya no existe en una sola línea.

¿Cuál es la diferencia entre designMode y contentEditable en un bookmarklet?

Establecer document.designMode en 'on' hace que todo el documento sea editable en una sola instrucción, mientras que contentEditable se establece por elemento, por lo que document.body.contentEditable = true edita solo la región del body. Usa designMode cuando quieras hacer clic en cualquier encabezado, párrafo o botón de toda la página; usa contentEditable cuando quieras limitar la edición a un único contenedor y dejar el resto de la página fijo.

¿Funciona el bookmarklet de EyeDropper en Firefox o Safari?

No. La EyeDropper API es exclusiva de Chromium, funciona en Chrome y Edge y solo sobre HTTPS en un contexto seguro; Firefox y Safari no la soportan a partir de 2026. La API también requiere una activación transitoria del usuario, pero un clic en un bookmarklet cuenta como gesto del usuario, por lo que open() se ejecuta correctamente cuando se activa de esa manera. En navegadores no compatibles, el bookmarklet lanza una excepción porque el constructor EyeDropper no está definido.

¿Puede un bookmarklet hacer solicitudes fetch de origen cruzado?

No libremente. Una llamada fetch() dentro de un bookmarklet se ejecuta en el contexto de la página actual, por lo que está sujeta a la política de mismo origen y a la directiva connect-src de la CSP del sitio. Las solicitudes a un origen diferente son bloqueadas a menos que ese endpoint envíe las cabeceras CORS correctas. Limita las llamadas de red de los bookmarklets al mismo origen que la página o a APIs con CORS habilitado; no existe ninguna solución del lado del cliente para la política de un sitio.