NorfiPC
NorfiPC » Informaciones » La Consola del navegador

Como usar la consola de JavaScript del navegador web


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Como ver en Firefox, Google Chrome, Internet Explorer y otros navegadores los logs de información, error o alerta de la consola de JavaScript. Como crear mensajes de saludo, de información o de cualquier otro tipo en nuestras páginas para mostrarles a los lectores y visitantes.
Como usar la consola de JavaScript del navegador web

¿Qué es la consola de JavaScript del navegador?


Todos los navegadores web modernos incluyen una consola, una poderosa herramienta creada para desarrolladores, usuarios avanzados o cualquier persona.
Muestra mensajes de información, error o alerta que se reciben al hacer las peticiones para cargar desde la red los elementos incluidos en las páginas.
Además incluye inspectores o verdaderos depuradores de código.
También permite interactuar con la página, ejecutando expresiones o comandos de JavaScript.
El propósito es probar el funcionamiento de las páginas o aplicaciones y descubrir posibles errores en el código.
Esta consola la usamos los desarrolladores, pero cualquier aficionado puede probarla y así estar al tanto del contenido de las páginas de cualquier sitio web.
También es posible crear un sencillo script que brinde a cualquier visitante curioso que abra la consola de su navegador, un mensaje de saludo, de información o de cualquier otro tipo, como se puede ver en esta página o en la principal de nuestro sitio web.




¿Cómo abrir la consola de JavaScript del navegador?


La consola de JavaScript es un panel que se abre en la parte inferior del navegador para no interferir con el contenido principal, pero se puede mover y cambiar su tamaño.
En cada navegador web posee un aspecto y se abre de forma diferente.

Iniciar y usar la consola del navegador en Firefox


En el navegador Firefox podemos usar las teclas Control + Mayus + J para abrir el panel de la consola.
También podemos emplear el menú Herramientas y en Desarrollador web escoger: "Consola del navegador".
Iniciar y usar la consola del navegador en Firefox
La consola muestra varias pestañas en las que se pueden encontrar información de las peticiones HTTP (los elementos de la página que se cargan de la red), los errores y análisis de CSS, JavaScript, errores y advertencias de seguridad y los Logs (mensajes).
El resultado de las peticiones HTTP se muestra de color negro, CSS de color azul, JavaScript amarillo y los errores o advertencias de seguridad de color rojo.
Lee más información avanzada en Mozilla: Web Console



Iniciar y usar la consola del navegador en Google Chrome


En el navegador Google Chrome de forma similar a Firefox podemos usar las teclas Control + Mayus + J y a continuación Escape.
También podemos dar un clic en el icono del menú en la esquina superior derecha y en Herramientas escoger "Consola de JavaScript".
Iniciar y usar la consola del navegador en Google Chrome
Lee más información avanzada en Developer Chrome: Using the Console



Iniciar y usar la consola del navegador en Internet Explorer


En el navegador Internet Explorer basta con presionar la tecla F12.
También podemos dar en clic en el menú Herramientas y escoger: "Herramientas de desarrollo".
Iniciar y usar la consola del navegador en Internet Explorer
El panel de Herramientas de desarrollo de Internet Explorer incluye 8 herramientas diferentes:
El explorador DOM que muestra la estructura de la página, la Consola, el Depurador, Red, Capacidad de respuesta, Generador de perfiles, Memoria y Emulación (para simular como se ve una página usando distintos dispositivos).
Lee más información avanzada en MSDN Microsoft:
Uso de la consola de herramientas F12 para ver errores y estado
Using the F12 developer tools



Como crear mensajes para mostrar en la consola del navegador


La consola se puede emplear en conjunto con JavaScript en muchas operaciones avanzadas, pero este artículo va dedicado a aficionados, no a desarrolladores, los que pueden encontrar más información en los enlaces más arriba.
Para mostrar un sencillo mensaje en una página web o entrada de nuestro blog, que podrá leer cualquier lector que abra la consola del navegador, solo es necesario incluir en cualquier parte de la página el siguiente script:

Al abrir la consola cualquier persona verá el mensaje.
Puede usarse en páginas aisladas o en todas las de un blog usando el script en la plantilla.
Usa \n para los saltos de línea.



Distintos tipos de logs o mensajes en la consola del navegador


➔ El método anterior "console.log()" muestra solo un mensaje, sin clasificarlo.
➔ El método de "console.info()" muestra un icono azul de información y a continuación el texto del mensaje (En Internet Explorer se muestra de color verde).
➔ El método de "console.error()" muestra un icono rojo de error con el mensaje coloreado en rojo.
➔ El método de "console.warn()" muestra un icono amarillo de advertencia.
Por ejemplo en esta página se usa el siguiente código y el resultado se puede comprobar en la siguiente imagen:

Distintos tipos de logs o mensajes en la consola del navegador



Personalizar el formato del mensaje en la consola del navegador


También se puede aplicar formato al mensaje de texto usando CSS, aunque solo se verá correctamente en el navegador Google Chrome.
Por ejemplo, para darle el color verde y usar una fuente grande usa:
console.log("%cMensaje de color verde y grande", "color: green; font-size: x-large");
Personalizar el formato del mensaje en la consola del navegador

Son varias las opciones que permite la consola para darle un toque más personal a las páginas de nuestro sitio, además de su función básica que es probar las páginas y aplicaciones en los diferentes navegadores.
Observa el código fuente de esta página para ver en más detalle el script que utilizamos y lee las páginas relacionadas para aprender más de JavaScript.

Otras páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio


 
Inicio | Mapa del sitio | Sobre mí | RSS