Ejecuta fragmentos de JavaScript

Kayce vascos
Kayce Vascos
Sofía Emelianova
Sofía Emelianova

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

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

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

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

Este es el código fuente del fragmento que registra algún mensaje y reemplaza el cuerpo HTML de la página principal con 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. Run, aparece el panel lateral de Console en el que se muestra el mensaje Hello, Snippets! que indica que el fragmento registra el contenido y que cambia el contenido de la página.

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

Cómo abrir el panel Fragmentos

En el panel Fragmentos, encontrarás una lista con tus fragmentos. Para editar un fragmento, ábrelo de una de las siguientes dos formas:

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

    El menú 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, verás una lista de los fragmentos que guardaste, pero vacíos 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 página de Herramientas para desarrolladores.

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

Cómo crear un fragmento en el panel Sources

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

    Nombrar un fragmento

Crea un fragmento desde el menú 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 Create new snippet y presiona Intro para ejecutar el comando.

    Selecciona Crear fragmento nuevo en el menú de comandos.

Consulte Cambiar el nombre de los fragmentos si desea 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.

    Fragmento abierto en el editor de código

  3. Use el editor de código para editar el código de su fragmento. Un asterisco junto al nombre del fragmento indica que todavía 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 los cambios.

Ejecutar fragmentos

Al igual que cuando se crea un fragmento, puede ejecutarlo en el panel Fragmentos y desde el Menú de comandos.

Cómo ejecutar 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. Ejecutar en la barra de acciones en la parte inferior del editor o presiona Control + Intro (Windows/Linux) o Comando + Intro (Mac).

    El botón Run

Ejecuta un fragmento desde el menú Comandos

  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.

    Ejecutar un fragmento desde el menú abierto

  4. Presiona Intro para ejecutar el fragmento.

Cómo 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 Rename.

Borrar fragmentos

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