Snippets: consola guardada que se ejecuta en cualquier página

Un snippet es un fragmento de JavaScript guardado en tu perfil de Chrome que se puede ejecutar sobre cualquier página con dos pulsaciones. Suena a comodidad menor y no lo es: al ejecutarse en el contexto de la consola, tiene acceso a las utilidades de selección, y al persistir entre sesiones, convierte cualquier diagnóstico que hayas escrito una vez en una herramienta permanente. La diferencia entre alguien que escribe la misma consulta de veinte líneas cada dos semanas y alguien que la ejecuta con tres teclas es real y se acumula.

Dónde viven y cómo se ejecutan

La sección de snippets está en el navegador de ficheros del panel de Sources. El botón de nuevo snippet crea uno con un nombre editable, y el editor es el mismo que el de cualquier fichero, con resaltado de sintaxis y autocompletado.

Hay tres formas de ejecutar uno.

Con el snippet abierto en el editor, la combinación Cmd+Enter o Ctrl+Enter, o el botón de ejecutar de la barra inferior.

Desde el árbol, con el menú contextual del snippet.

Desde el menú de comandos con el prefijo ! seguido del nombre. Esta es la vía que de verdad se usa: abres el diálogo, escribes ! y las tres primeras letras, y se ejecuta. No hace falta ni abrir el panel de Sources.

Esa tercera forma es la que convierte los snippets en algo parecido a comandos propios de las DevTools, y es el argumento para nombrarlos con prefijos consistentes: si todos tus snippets de accesibilidad empiezan por a11y, escribir !a11y los lista todos.

El contexto de ejecución

Un snippet se ejecuta con los mismos privilegios y en el mismo ámbito que una expresión escrita en la consola. Las consecuencias son cuatro y todas importan.

Tiene acceso a las utilidades de la consola. $, $$, $x, $0, copy, inspect, getEventListeners, monitorEvents, queryObjects. Eso permite escribir en veinte caracteres lo que en un fichero normal costaría cinco líneas.

Se ejecuta en el contexto seleccionado. Si tienes seleccionado un iframe en el desplegable de contexto, el snippet corre ahí. Es la forma de aplicar una herramienta dentro de un marco concreto.

Comparte el ámbito global de la página. Puede leer y modificar las variables globales, y las que declare con var o sin declaración quedan en el global. Con let y const no, porque cada ejecución es un ámbito nuevo.

Aparece en la pila de llamadas como un fichero propio, con su nombre. Si el snippet lanza un error, sabrás que fue tuyo.

Reejecutar sin acumular

El problema práctico más frecuente. Un snippet que registra un observador, envuelve un método o añade un elemento a la página, ejecutado tres veces, deja tres observadores, tres envolturas anidadas y tres elementos.

El patrón que lo resuelve tiene dos partes: guardar el mecanismo de limpieza en el objeto global con una clave conocida, y limpiar antes de instalar.

// Patron base para cualquier snippet con estado
(() => {
  const CLAVE = '__miHerramienta';
  if (globalThis[CLAVE]) {
    globalThis[CLAVE]();
    delete globalThis[CLAVE];
    console.log('herramienta anterior desactivada');
    return;
  }

  // ---- instalacion ----
  const observador = new MutationObserver(ms => console.debug('mutaciones:', ms.length));
  observador.observe(document.body, { childList: true, subtree: true });

  // ---- funcion de limpieza ----
  globalThis[CLAVE] = () => observador.disconnect();
  console.log('herramienta activada; vuelve a ejecutar para desactivarla');
})();

Con ese patrón, el mismo snippet activa y desactiva alternativamente, que es exactamente el comportamiento que quieres de una herramienta que vives encendiendo y apagando.

Para snippets que solo consultan y no dejan nada, la envoltura no hace falta, aunque conviene igualmente usar una función autoejecutada para no ensuciar el global con variables sueltas.

Persistencia y sus límites

Los snippets se guardan en el perfil de Chrome. Sobreviven a cerrar el navegador, a reiniciar la máquina y a actualizar Chrome.

No se sincronizan con tu cuenta, a diferencia de las preferencias de las DevTools. Eso sorprende siempre, porque son justo lo que más querrías llevar entre máquinas.

No se comparten entre perfiles del mismo navegador ni entre canales.

No se exportan desde ninguna interfaz.

La consecuencia práctica es que hay que tratarlos como código: guardarlos en un repositorio, en un gist, o en cualquier sitio del que se puedan copiar. El flujo de montar una máquina nueva incluye pegar los snippets uno por uno, que es tedioso y se hace una vez cada mucho tiempo.

Hay una alternativa para quien tenga muchos: escribir un solo snippet que instale un objeto global con todas tus herramientas como métodos.

// Un unico snippet que instala toda tu caja de herramientas
globalThis.h = {
  desborde: () => $$('*').filter(e => e.scrollWidth > e.clientWidth + 1),
  sinAlt: () => $$('img:not([alt])'),
  tabulables: () => $$('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
    .filter(e => !e.disabled && e.offsetParent !== null),
  fijos: () => $$('*').filter(e => ['fixed', 'sticky'].includes(getComputedStyle(e).position))
};
console.log('herramientas en h:', Object.keys(globalThis.h).join(', '));

Después de ejecutarlo, h.desborde() funciona en la consola de esa página. Es un solo texto que copiar y una sola ejecución por pestaña.