Actualmente, todos los navegadores web modernos cuentan con herramientas de desarrollo integradas para trabajar con JavaScript y otras tecnologías web como CSS. Tras ver cómo podíamos ejecutar JavaScript en HTML, en el presente artículo vamos a ver cómo ejecutar JavaScript en la consola de desarrollador que integran los navegadores actuales.

Ejecutar directamente JavaScript en el navegador nos va a facilitar la vida, pues de esta forma podremos probar un determinado código directamente en el navegador sin tener que abrir un IDE, modificar un archivo o hacer cambios en la web. Cuando ejecutamos JavaScript en la consola de desarrolador de nuestro navegador, ese código es temporal al igual que las modificaciones que realice.


Diferentes formas de ejecutar JavaScript


Recordemos que si queremos probar un código en JavaScript que hemos desarrollado o en el que estamos trabajando, básicamente tenemos que empezar viendo cuál es la naturaleza u objetivo de nuestro código. Básicamente tenemos tres opciones:

  • Es un código que vamos a integrar en el diseño de nuestra web junto a HTML (FrontEnd)
  • Es un código que vamos a usar para diseñar y construir la estructura interna de nuestra web o aplicación (Backend)
  • Simplemente queremos probar modificaciones o funcionalidades en una web ya existente pero no queremos guardar los cambios

Estas son las tres situaciones más comunes en las que nos vamos a encontrar a la hora de estar trabajando con JavaScript. Así pues, dependiendo del objetivo que tengamos, la forma más óptima de ejecutar y probar JavaScript será diferente.

En este artículo nos vamos a centrar en la última opción de estas tres: probar funcionalidades en una web sin realizar cambios, directamente en el navegador a través de la consola de desarrollador.


Ejecutar JavaScript en consola de desarrollador


Para empezar, vamos a ver cómo abrir la consola de desarrollador en los tres navegadores más comunes: Mozilla Firefox, Google Chrome y Microsoft Edge. Por suerte para la extensión de este artículo, el procedimiento para estos tres navegadores es exactamente el mismo:

Para abrir la consola de desarrollador tanto en Firefox, Chrome y Edge tenemos dos opciones:

  • La primera opción es la de ir al menú de la aplicación ( para Firefox, tres puntos verticales para Chrome y tres puntos horizontales para Edge) en la esquina superior derecha, luego ir a «Más herramientas«, pulsar en «Herramientas para el desarrollador» y por último en «Consola».

Ejectuar javascript en consola

  • La segunda opción es la de pulsar click derecho en cualquier parte de la web, pulsar en «Inspeccionar» y por último en «Consola».

Ejectuar javascript en consola

Con estos dos métodos ya tenemos lista nuestra consola en la cual podemos escribir nuestro código JavaScript y se ejecutará inmediatemente. Veamos cómo se ejecuta un ‘Hola Mundo’ con un console.log en la consola del navegador. Para ello escribiremos lo siguiente y presionaremos Enter:

console.log('Hola Mundo)'

Tras escribir y ejecutar este símple código, podremos ver los resultados en la consola del navegador:



Del mismo modo que hemos ejecutado un ‘Hola Mundo’ por la consola del navegador, podremos ejecutar cualquier código en JavaScript que interactue con la web o el navegador. Pero estas funcionalidades, ya las iremos viendo en nuestras entregas de Aprende JavaScript


Conclusión


Ejecutar Javascript en la consola del navegador es algo realmente sencillo en cualquier navegador actual. Esto nos permite poder probar código JavaScript de forma inmediata sin realizar cambios en la web y sus archivos.