Información general sobre la consola

En esta página se explica cómo la consola DevTools de Microsoft Edge facilita el desarrollo de páginas web. La consola tiene dos usos principales: ver mensajes registrados y ejecutar JavaScript.

Visualización de mensajes registrados

Los desarrolladores web suelen registrar mensajes en la consola para asegurarse de que su JavaScript funciona según lo esperado. Para registrar un mensaje, inserte una expresión como console.log('Hello, Console!') en su JavaScript. Cuando el explorador ejecuta JavaScript y procesa una expresión como esta, el explorador registra el mensaje en la consola.

Html y JavaScript para la página.

<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{ first: 'René', last: 'Magritte' },
{ first: 'Chaim', last: 'Soutine' },

];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>

En la siguiente figura, la consola muestra los resultados de cargar la página y esperar 3 segundos.

Panel consola

Intente determinar qué líneas de código provocaron que el explorador registrara los mensajes.

Los desarrolladores web registrarán mensajes por los siguientes 2 motivos generales.

  • Asegurarse de que el código se ejecuta en el orden correcto.
  • Inspeccionar los valores de las variables en un momento determinado.

Para obtener experiencia práctica con el registro, vaya a Introducción a Los mensajes de registro. Para examinar la lista completa de console métodos, vaya a La referencia de la API de consola. La diferencia principal entre los métodos es cómo se muestran los datos que se registran.

Ejecución de JavaScript

La consola también es una REPL. Puede ejecutar JavaScript en la consola para interactuar con la página que se va a inspeccionar.

En la siguiente figura, la consola se muestra junto a la página principal de DevTools.

La herramienta Consola junto a la página principal de DevTools

En la siguiente figura, se muestra la misma página después de usar la consola para cambiar el encabezado superior de la página.

Usar la consola para cambiar el encabezado superior de la página

La modificación de la página desde la consola es posible porque la consola tiene acceso completo a la ventana de la página. DevTools tiene algunas funciones de comodidad que facilitan la inspección de una página. Por ejemplo, supongamos que JavaScript contiene una función denominada hideModal . La debug(hideModal) ejecución pausa el código en la primera línea de la próxima vez que lo hideModal ejecute. Para obtener más información acerca de la lista completa de funciones de utilidad, vaya a Console Utilities API Reference.

Al ejecutar JavaScript no es necesario interactuar con la página. Puede usar la consola para probar código nuevo que no esté relacionado con la página. Por ejemplo, supongamos que acaba de aprender sobre el método integrado map() de matriz de JavaScript y desea experimentar con él.
La consola es un buen lugar para probar la función.

Para obtener más experiencia práctica con la ejecución de JavaScript en la consola, vaya a Introducción a La ejecución de JavaScript.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.