Ejecuta fragmentos de JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Si ejecutas el mismo código en la Consola de forma repetida, considera guardar el código 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 modo Incógnito.

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

Página principal de la documentación de DevTools antes de ejecutar el fragmento. El botón Ejecutar aparece destacado.

Este es el código fuente del fragmento que registra un 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. Run, aparece el panel lateral Console para mostrar el mensaje Hello, Snippets! que registra el fragmento, y el contenido de la página cambia.

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

Abre el panel Snippets

En el panel Snippets, se enumeran tus fragmentos. Para editar un fragmento, ábrelo de una de las siguientes dos maneras:

  1. Navega a Sources > Más pestañas. > Snippets.

    El menú Más pestañas en el panel Fuentes.

  2. Desde 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 Show Snippets y presiona Intro.

    Selecciona Mostrar fragmentos en el menú de comandos.

En el panel Sources>Snippets, se muestra una lista de los fragmentos que guardaste, que está 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 las Herramientas para desarrolladores.

En el panel Snippets, se ordenan los fragmentos en orden alfabético.

Cómo crear un fragmento en el panel Fuentes

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

    Asignar un nombre a un fragmento

Cómo crear un fragmento desde el menú de comandos

  1. Enfoca el cursor en cualquier parte de las 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.

    Selecciona Create new snippet en el menú de comandos.

Consulta Cambia el nombre de los fragmentos si quieres asignarle un nombre personalizado a tu fragmento nuevo.

Cómo editar fragmentos

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

    Se abrió un fragmento en el editor de código.

  3. Usa el editor de código para editar 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 Cmd + S (Mac) para guardar.

Ejecuta fragmentos

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

Ejecuta un fragmento en el panel Fuentes

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

    El botón Run.

Cómo ejecutar un fragmento desde el menú de comandos

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

    Ejecución de un fragmento desde el menú Abrir.

  4. Presiona Intro para ejecutar el fragmento.

Cambiar el nombre de los fragmentos

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

Borra fragmentos

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