Ejecutar fragmentos de código desde cualquier página

Los fragmentos son pequeñas secuencias de comandos que puedes escribir y ejecutar desde el panel Sources de Chrome DevTools. Puedes tener acceso a ellos y ejecutarlos desde cualquier página. Cuando ejecutas un fragmento, este se ejecuta desde el contexto de la página actualmente abierta.

Si hay utilidades o secuencias de comandos de depuración pequeñas que uses reiteradamente en varias páginas, considera guardar las secuencias de comandos como fragmentos. También puedes usar fragmentos como alternativa a los bookmarklets.

TL;DR

  • Los fragmentos son pequeñas secuencias de comandos que puedes ejecutar desde cualquier página (similares a los bookmarklets).
  • Ejecuta partes de fragmentos en la consola con la función “Evaluate in Console”.
  • Recuerda que las funciones más populares del panel Sources, como los puntos de interrupción, también funcionan con fragmentos.

Crear un fragmento

Para crear un fragmento, abre el panel Sources, haz clic en la pestaña Snippets, haz clic con el botón secundario en el navegador y, luego, selecciona New.

crear fragmento

Ingresa el código en el editor. Cuando haya cambios sin guardar, habrá un asterisco junto al nombre de tu secuencia de comandos, como se muestra en la siguiente captura de pantalla. Presiona Command+S (Mac) o Ctrl+S (Windows, Linux) para guardar tus cambios.

fragmento sin guardar

Ejecutar fragmento

Existen tres formas de ejecutar un fragmento:

  • Haz clic con el botón secundario en el nombre de archivo del fragmento (en el panel de la izquierda, donde se enumeran todos tus fragmentos) y selecciona Run.
  • Haz clic en el botón Run (botón de ejecución de 
  fragmento).
  • Presiona Command+Enter (Mac) o Ctrl+Enter (Windows, Linux).

Para evaluar una parte de tu fragmento en la consola, selecciona la parte, haz clic con el botón secundario en cualquier lugar del editor y selecciona Evaluate in Console o usa la combinación de teclas Command+Shift+E (Mac) o Ctrl+Shift+E (Windows, Linux).

Evaluate in Console

Ver modificaciones locales

Para ver las diferentes modificaciones que has hecho en un fragmento, haz clic con el botón secundario en el editor (mientras se muestra el fragmento) y selecciona Local modifications.

Local Modifications...

Aparece una pestaña nueva denominada History en el panel lateral de la consola.

historial de fragmentos

Cada una de las marcas de tiempo representa una modificación. Expande la flecha junto a la marca de tiempo para ver las diferentes modificaciones en el momento en cuestión. El vínculo revert borra el historial de revisión. A partir del 27 de junio de 2016, es posible que los vínculos apply revision content y apply original content no funcionen correctamente.

Establecer puntos de interrupción

Así como sucede con otras secuencias de comandos, puedes establecer puntos de interrupción en fragmentos. Consulta el artículo sobre cómo agregar puntos de interrupción para aprender a agregarlos desde el panel Sources.