Ejecuta fragmentos de JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Si notas que ejecutas el mismo código de forma reiterada en Console, considera guardarlo como un fragmento. Los fragmentos tienen acceso al contexto de JavaScript de la página. Son una alternativa a bookmarklets.

Puedes crear fragmentos en el panel Sources y ejecutarlos en cualquier página y en modo Incógnito.

Por ejemplo, la siguiente captura de pantalla muestra la página principal de la documentación de Herramientas para desarrolladores a la izquierda y un código fuente de fragmento en el panel Fuentes > Fragmentos a la derecha.

La página principal de la documentación de Herramientas para desarrolladores antes de ejecutar el fragmento. Se destaca el botón Ejecutar (Run).

Este es el código fuente del fragmento que registra algún mensaje y reemplaza el cuerpo HTML de la página principal por un elemento <p> que contiene el mensaje:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Cuando haces clic en el botón Ejecute. Ejecutar, aparece el panel lateral Consola para mostrar el mensaje Hello, Snippets! que registra el fragmento y que cambia el contenido de la página.

Es la página principal después de ejecutar el fragmento.

Cómo abrir el panel Fragmentos

En el panel Fragmentos, se enumeran tus fragmentos. Para editar un fragmento, puedes abrirlo de dos maneras:

  1. Navega a Fuentes > Más pestañas. > Fragmentos.

    Menú de más pestañas en el panel Sources.

  2. En el menú de comandos:

    1. Presiona Control + Mayúsculas + P (Windows/Linux) o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.
    2. Comienza a escribir Snippets, selecciona Mostrar fragmentos y presiona Intro.

    Selecciona Mostrar fragmentos en el menú de comandos.

En el panel Fuentes>Fragmentos, se muestra una lista de fragmentos que guardaste, vacía en este ejemplo.

Un panel de fragmentos vacío

Crear fragmentos

Puedes crear fragmentos en el panel Fragmentos o ejecutando el comando correspondiente desde el menú de comandos en cualquier parte de Herramientas para desarrolladores.

El panel Fragmentos ordena tus fragmentos por orden alfabético.

Cómo crear un fragmento en el panel de fuentes

  1. Abre el panel Fragmentos.
  2. Haz clic en Fragmento nuevo. Nuevo fragmento.
  3. Ingresa un nombre para el fragmento y presiona Intro para guardarlo.

    Asignar un nombre a un fragmento

Crea un fragmento desde el menú de comandos

  1. Enfoca el cursor en cualquier lugar de Herramientas para desarrolladores.
  2. Presiona Control + Mayúsculas + P (Windows/Linux) o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos.
  3. Comienza a escribir Snippet, selecciona Crear nuevo fragmento y, luego, presiona Intro para ejecutar el comando.

    Seleccionando Crear nuevo fragmento (Create new snippet) en el menú de comandos

Consulta Cómo cambiar el nombre de los fragmentos si deseas asignar un nombre personalizado al fragmento nuevo.

Editar fragmentos

  1. Abre el panel Fragmentos.
  2. En el panel Fragmentos, haz clic en el nombre del fragmento que quieres editar. El panel Sources lo abre en el Editor de código.

    Un fragmento abierto en el editor de código.

  3. Usa el editor de código para modificar el código de tu fragmento. Un asterisco junto al nombre del fragmento significa que aún no guardaste los cambios.

    Un asterisco junto al nombre del fragmento que indica que el código no se guardó

  4. Presiona Control + S (Windows/Linux) o Comando + S (Mac) para guardar.

Ejecutar fragmentos

Al igual que cuando creas un fragmento, puedes ejecutarlo en el panel Fragmentos y desde el menú de comandos.

Ejecuta un fragmento en el panel Sources

  1. Abre el panel Fragmentos.
  2. Haz clic en el nombre del fragmento que deseas ejecutar. El panel Sources lo abre en el Editor de código.
  3. Haz clic en Ejecute. Run en la barra de acciones de la parte inferior del editor o presiona Control + Intro (Windows/Linux) o Comando + Intro (Mac).

    El botón Ejecutar

Ejecuta un fragmento desde el menú Comando

  1. Enfoca el cursor en cualquier lugar de Herramientas para desarrolladores.
  2. Presiona Control + O (Windows/Linux) o Comando + O (Mac) para abrir el menú de comandos.
  3. Escribe el carácter ! seguido del nombre del fragmento que deseas ejecutar.

    Cómo ejecutar un fragmento desde el menú abierto

  4. Presiona Intro para ejecutar el fragmento.

Cambiar el nombre de los fragmentos

  1. Abre el panel Fragmentos.
  2. Haz clic con el botón derecho en el nombre del fragmento y selecciona Cambiar nombre.

Borrar fragmentos

  1. Abre el panel Fragmentos.
  2. Haz clic con el botón derecho en el nombre del fragmento y selecciona Quitar.