¿Ha notado que copia una y otra vez el mismo JavaScript en la consola de las DevTools? Un fragmento de depuración, extraer datos de una página, una modificación rápida del DOM, y cada vez tiene que teclearlo manualmente o pegarlo desde un bloc de notas.

Las Chrome DevTools incluyen desde hace varios años un editor de fragmentos integrado justo en la pestaña Sources. Usted escribe el script una vez, le asigna un nombre y lo ejecuta en cualquier página con un solo clic o atajo de teclado. Funciona más rápido que un bookmarklet y no requiere extensiones.

Recorreremos el ciclo completo paso a paso: desde abrir el panel Snippets hasta ejemplos prácticos listos para usar que puede aprovechar.

💡 Resumen rápido:

• Abra el panel Snippets desde la pestaña Sources o el menú de comandos
• Cree un nuevo fragmento y asígnele un nombre descriptivo
• Escriba JavaScript en el editor de código y guarde con Ctrl+S
• Ejecute el fragmento con el botón Run o mediante el menú de comandos con !
• Recorra ejemplos prácticos: limpiar una página, recolectar datos, modificar estilos

Qué son los fragmentos y por qué los necesita

Un fragmento es un trozo de JavaScript guardado directamente en Chrome DevTools. A diferencia del código en la consola, no desaparece al recargar la página o cerrar el navegador; permanece en la pestaña Sources esperando a ser ejecutado.

La principal ventaja frente a la consola: un fragmento se ejecuta en el contexto de la página actual y tiene acceso completo a su DOM, variables y APIs. Puede escribir un script para extraer datos de cualquier sitio, modificar la maquetación o automatizar tareas rutinarias y ejecutarlo cuando quiera sin volver a teclearlo.

Un enfoque alternativo son los bookmarklets (marcadores con javascript: en la URL), pero están limitados por la longitud de la URL y resultan incómodos para código multilínea. En Firefox el equivalente era Scratchpad, pero se eliminó del navegador a partir de la versión 70 y se sustituyó por el editor multilínea de la consola.

Vea este breve videotutorial sobre fragmentos; está en inglés, pero todas las acciones se muestran en pantalla y coinciden plenamente con los pasos descritos a continuación.

Así es un flujo de trabajo típico con fragmentos: la captura muestra la página original a la izquierda y el código en el editor a la derecha.

El código fuente de este ejemplo hace tres cosas: registra un mensaje en la consola, limpia document.body e inserta un nuevo párrafo:

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);

Tras la ejecución, la página cambia por completo: aparece Hello, Snippets! en la consola y el contenido del cuerpo se reemplaza con un único párrafo.

Cómo abrir el panel de fragmentos

El panel Snippets se encuentra dentro de la pestaña Sources. Hay dos maneras de llegar: con el ratón y mediante el menú de comandos.

Método uno: con el ratón

Abra DevTools (F12 o Ctrl+Shift+I) y vaya a la pestaña Sources. A la izquierda verá el panel Page con el árbol de archivos de la página; está abierto por defecto.

Haga clic en la pestaña Snippets en la misma columna izquierda. Si la pestaña no está visible, haga clic en la flecha More tabs (>>); se abrirá una lista desplegable con las pestañas ocultas, incluida Snippets.

Método dos: menú de comandos

El menú de comandos es la forma más rápida de navegar por DevTools si recuerda el atajo.

• Ponga el foco en cualquier lugar dentro de DevTools.
• Presione Ctrl+Shift+P (Windows/Linux) o Cmd+Shift+P (Mac) para abrir el menú de comandos.
• Empiece a escribir snippets y seleccione Show Snippets, luego presione Enter.

Crear un nuevo snippet

El panel Snippets está abierto; ahora añadamos el primer script.

A través del panel Sources

En el panel Snippets haga clic en el botón New snippet. Ingrese el nombre del snippet y presione Enter; aparecerá en la lista de la izquierda.

El nombre debe ser significativo; en un mes no recordará qué hace snippet-3. Escriba "limpiar-pagina-y-log", "extraer-precios-producto" o "alternar-modo-oscuro".

A través del menú de comandos

El mismo atajo Ctrl+Shift+P / Cmd+Shift+P, pero ahora escriba snippet y seleccione Create new snippet, luego Enter.

El nuevo snippet se crea con un nombre predeterminado; renómbrelo haciendo clic derecho y seleccionando Rename.

Editar el código del snippet

Haga clic en el nombre del snippet en el panel izquierdo; el editor de código se abrirá a la derecha. Es un editor completo con resaltado de sintaxis, números de línea y autocompletado para JavaScript.

Escriba código como lo haría en cualquier editor. Todas las API estándar del navegador están disponibles: los objetos document y window, las funciones fetch y console, el almacenamiento localStorage. El conjunto completo de lo que la página ve.

Cuando el código no está guardado, aparece un asterisco junto al nombre del snippet. Guardar: Ctrl+S (Windows/Linux) o Cmd+S (Mac).

Use Ctrl+Z / Cmd+Z para deshacer; el historial de cambios funciona dentro de la sesión de edición.

Ejecutar un snippet

Con el botón Run en el panel Sources

Abra el snippet deseado en el editor. Haga clic en el botón Run (icono de reproducción) en la parte inferior del panel:

O presione Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). El snippet se ejecutará en el contexto de la página actualmente abierta.

A través del menú de comandos con un signo de exclamación

Abra el menú de comandos (Ctrl+Shift+P / Cmd+Shift+P), borre el símbolo >, escriba ! y empiece a ingresar el nombre del snippet. DevTools mostrará las opciones coincidentes:

Seleccione la que necesite y presione Enter. Este método es conveniente cuando no quiere cambiar a la pestaña Sources.

Renombrar y eliminar

Ambas operaciones se realizan desde el panel Snippets haciendo clic derecho sobre el nombre del snippet:

• Rename: establezca un nuevo nombre,
• Remove: elimine el snippet de forma permanente.

La eliminación no solicita confirmación, así que tenga cuidado. Antes de eliminar un script complejo, copie el código a un archivo de texto.

Ejemplos prácticos de snippets

Hemos cubierto la teoría; ahora aquí tiene varios scripts listos para usar que puede copiar, guardar como snippet y utilizar de inmediato.

Limpiar una página para una captura de pantalla

Elimina todo el contenido e inserta un fondo blanco limpio, útil al tomar capturas de pantalla para un portafolio o documentación:

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

Recolectar todos los enlaces de una página

Extrae todas las URL y las muestra en la consola como una lista. Útil para auditar una página o recolectar datos:

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 oscuro en cualquier sitio

Aplica inversión a toda la página, funciona incluso donde no hay un tema oscuro 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)');

Resaltar todos los botones de una página

Delinea cada <button> e input[type="submit"] con un borde rojo, conveniente para revisar la maquetación:

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

Todos estos fragmentos pueden combinarse y ampliarse para sus propias tareas. Guárdelos una vez, úselos durante años.

⁉️🤔 Preguntas frecuentes

¿Dónde se almacenan físicamente los snippets de Chrome DevTools?

Los snippets se guardan en el perfil de Chrome, dentro del archivo Preferences (JSON), en la ruta %LocalAppData%\Google\Chrome\User Data\Default\Preferences en Windows o ~/Library/Application Support/Google/Chrome/Default/Preferences en Mac. NO se sincronizan a través de la cuenta de Google; si cambia de equipo o reinstala el navegador, los snippets se pierden. Para transferirlos manualmente, copie la sección devtools.preferences.snippets de un archivo Preferences a otro con el navegador cerrado.

¿En qué se diferencia un snippet de un bookmarklet?

Un bookmarklet es un marcador con una URL que empieza por javascript:, limitado por el tamaño de la URL (unos 2000 caracteres) e incómodo de editar. Un snippet es un editor completo dentro de DevTools, sin límite de longitud, con resaltado de sintaxis y persistencia entre sesiones. Además, un snippet se puede ejecutar con el atajo Ctrl+Enter sin apartar las manos del teclado.

¿Se puede ejecutar un snippet automáticamente al cargar la página?

No directamente. Un snippet siempre requiere ejecución manual. Si necesita automatización al cargar la página, use una extensión de Chrome (content script) o Tampermonkey/Violentmonkey con userscripts; estos se activan con el evento de carga de la página y no requieren intervención manual.

¿Cómo hago una copia de seguridad de mis snippets antes de reinstalar Chrome?

Abra DevTools, vaya a Sources → Snippets, haga clic derecho en cada snippet y seleccione Save as; esto guardará un archivo .js en el disco. Otra opción: abra chrome://version/, localice la ruta del perfil, cierre Chrome y copie la sección JSON devtools.preferences.snippets del archivo Preferences.

¿Por qué mi snippet no ve las variables de la consola?

Un snippet se ejecuta en su propio ámbito; no tiene acceso a las variables declaradas en la consola mediante var/let/const en el ámbito global. Para pasar datos, asigne un valor directamente a window: window.myData = {...} en la consola y luego lea window.myData en el snippet. O a la inversa: el snippet puede establecer datos en window y la consola puede leerlos.

¿Vale la pena aprender snippets en 2026?

Los snippets son una de esas herramientas que no cambian durante años, pero que aceleran radicalmente el trabajo rutinario si no se olvida de ellas. Cinco minutos dedicados a crear un script para recopilar enlaces o limpiar una página ahorran decenas de operaciones manuales cada mes.

Empiece con tres snippets sencillos: recopilar datos de tablas en una página, limpieza rápida del DOM para capturas de pantalla y resaltar un elemento por selector. Guárdelos y la próxima vez que necesite extraer datos de un sitio externo o revisar la maquetación, lo hará en segundos en lugar de pasar media hora copiando y pegando.

Solo recuerde hacer copia de seguridad: los snippets no se sincronizan entre dispositivos y, sin una copia del archivo Preferences, desaparecerán cuando reinstale el sistema.