Información general sobre la consola
La consola es como una línea de comandos inteligente y enriquecida dentro de DevTools, y es una excelente herramienta complementaria para usar con otras herramientas. La consola proporciona una manera eficaz de crear scripts de funcionalidad, inspeccionar la página web actual y manipular la página web actual mediante JavaScript.
La herramienta Consola ayuda con varias tareas, que se tratan con más detalle en los artículos siguientes:
- Realice un seguimiento de los problemas para averiguar por qué algo no funciona en el proyecto actual. Consulte Corrección de errores de JavaScript que se notifican en la consola.
- Obtenga información sobre el proyecto web en el explorador como mensajes de registro. Consulte Filtrar mensajes de consola.
- Información de registro en scripts con fines de depuración. Consulte Mensajes de registro en la herramienta Consola.
- Pruebe las expresiones de JavaScript en vivo en un entorno REPL . Consulte Ejecución de JavaScript en la consola.
- Interactúe con el proyecto web en el explorador mediante JavaScript. Consulte Interacción con el DOM mediante la consola.
Puede abrir la herramienta Consola en la parte superior o inferior de DevTools; se muestra aquí en la parte superior, en la barra de actividad:
La consola se muestra aquí en la parte inferior de DevTools (el panel Vista rápida ), con la herramienta Elementos abierta encima de ella:
La forma más rápida de abrir directamente la consola es presionar Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).
Informes de errores y la consola
La consola es el lugar predeterminado donde se notifican los errores de conectividad y JavaScript. Para obtener más información, consulte Corrección de errores de JavaScript que se notifican en la consola.
DevTools proporciona información detallada sobre el error en la consola:
Buscar en la web una cadena de mensaje de error de consola
Busque en la web los mensajes de error de la consola , directamente desde DevTools. En la consola, muchos mensajes de error tienen una opción Buscar este mensaje en el botón Web , que se muestra como lupa:
Al hacer clic en buscar este mensaje en el botón Web , se abre una nueva pestaña en el explorador y muestra los resultados de la búsqueda del mensaje de error:
Inspección y filtrado de información en la página web actual
Al abrir DevTools en una página web, puede haber una cantidad abrumadora de información en la consola. La cantidad de información se convierte en un problema cuando necesita identificar información importante. Para ver la información importante que necesita acción, use la herramienta Problemas en DevTools.
Los problemas se mueven gradualmente de la consola a la herramienta Problemas . Sin embargo, todavía hay mucha información en la consola, por lo que es una buena idea conocer las opciones de registro y filtro automatizadas en la consola. Para obtener más información, vea Filtrar mensajes de consola.
DevTools con una consola llena de mensajes:
Información de registro que se va a mostrar en la consola
El caso de uso más popular para la consola es registrar información de los scripts mediante el console.log() método u otros métodos similares.
Código de ejemplo
// prints the text to the console as a log message
console.log('This is a log message');
// prints the text to the console as an informational message
console.info('This is some information');
// prints the text to the console as an error message
console.error('This is an error');
// prints the text to the console as a warning
console.warn('This is a warning');
// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());
// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());
// shows a list of techologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technolgies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd('Technolgies');
Para registrar la información que se va a mostrar en la consola:
Abra la página web de demostración Ejemplos de mensajes de consola: registro, información, error y advertencia en una nueva ventana o pestaña.
Para abrir la consola, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).
La consola muestra los mensajes resultantes causados por el código de demostración:
Pegue el código anterior en la consola y presione Entrar.
Si recibe un mensaje:
Uncaught SyntaxError: Identifier 'technologies' has already been declaredAbra una nueva pestaña o ventana.
Para abrir la consola, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS).
Pegue el código anterior en la consola y presione Entrar.
Hay muchos métodos útiles disponibles cuando se trabaja con la consola. Para obtener más información, vea Log messages in the Console tool (Mensajes de registro en la herramienta consola).
Prueba de JavaScript en directo en la consola
La consola no es solo un lugar para registrar información. La consola es un entorno REPL . Al escribir cualquier JavaScript en la consola, el código se ejecuta inmediatamente. Es posible que le resulte útil probar algunas características nuevas de JavaScript o realizar algunos cálculos rápidos. Además, obtendrá todas las características que espera de un entorno de edición moderno, como la autocompletar, el resaltado de sintaxis y el historial.
Para intentar ejecutar JavaScript en la consola:
Abra la consola.
Escriba
2+2.
La consola muestra el resultado de 2+2 live a medida que lo escribe, mostrando el resultado 4 en la línea siguiente:
Esta característica de evaluación diligente es útil para depurar y comprobar que no se están cometiendo errores en el código.
Para ejecutar la expresión de JavaScript en la consola y, opcionalmente, mostrar un resultado, presione Entrar. A continuación, puede escribir el siguiente código JavaScript para ejecutarlo en la consola.
Ejecución de varias líneas de código JavaScript en sucesión:
De forma predeterminada, se ejecuta código JavaScript en una sola línea. Para ejecutar una línea, escriba javaScript y presione Entrar. Para evitar la limitación de una sola línea, presione Mayús+Entrar en lugar de Entrar.
De forma similar a otras experiencias de línea de comandos, para acceder a los comandos de JavaScript anteriores, presione Flecha arriba. La característica de autocompletar de la consola es una excelente manera de aprender sobre métodos desconocidos.
Para probar la autocompletar:
- Abra la consola.
- Escriba
doc. - Seleccione
documenten el menú desplegable. - Presione Tab para seleccionar
document. - Escriba
.bo. - Presione Tab para seleccionar
document.body. - Escriba otro
.para mostrar la lista completa de propiedades y métodos disponibles en el cuerpo de la página web actual.
Para obtener más información sobre todas las formas de trabajar con la consola, consulte Consola como entorno de JavaScript.
Autocompletar expresiones de JavaScript en la consola:
Interactuar con la página web actual en el explorador
La consola tiene acceso al objeto Window del explorador. Puede escribir scripts que interactúen con la página web actual; para ello, lea los datos del DOM y asigne datos a los elementos DOM.
Lectura desde el árbol DOM en la consola
Para usar una expresión de JavaScript para leer desde la página actual leyendo un elemento seleccionado del árbol DOM:
Abra la consola.
Pegue el código siguiente en la consola y, a continuación, presione Entrar:
document.querySelector('h1').innerHTMLEsta expresión selecciona el primer nivel de encabezado 1 del DOM y, a continuación, selecciona el contenido HTML contenido entre las
<h1>etiquetas inicial y final. La consola muestra la salida de la expresión, que es el texto del encabezado:
Para leer la representación DOM de la página web, escriba una expresión de JavaScript en la consola y muestre la salida en la consola.
Escritura en el árbol DOM y la página web desde la consola
También puede cambiar la página web representada, cambiando el DOM (o escribiendo en el DOM) desde dentro de la consola.
Para cambiar la página web representada:
Abra la consola.
Pegue el código siguiente en la consola y, a continuación, presione Entrar:
document.querySelector('h1').innerHTML = 'Rocking the Console';La expresión de JavaScript anterior usa el
=signo para asignar un valor al elemento DOM seleccionado. El valor evaluado de la expresión es una cadena para un encabezado, en este ejemplo. El valor de la expresión (la cadena de encabezado) se muestra tanto en la consola como en la página web representada:
Ha cambiado el encabezado principal de la página web a Rocking the Console.
Uso del método de utilidad $$ Console para
Los métodos de la Utilidad de consola facilitan el acceso y la manipulación de la página web actual.
Por ejemplo, para agregar un borde verde alrededor de todos los vínculos de la página web actual:
Abra la consola.
Pegue el código siguiente en la consola y, a continuación, presione Entrar:
$$('a').forEach(a => a.style.border='1px solid lime');La
$$(selector)función de utilidad de consola es "Selector de consultas todo". Esta función del selector de consultas DOM devuelve una matriz de todos los elementos que coinciden con el selector CSS especificado, como la funcióndocument.querySelectorAll()JavaScript . En este ejemplo, seleccionamos todos los elementos de<a>hipervínculo y, a continuación, aplicamos un cuadro verde alrededor de ellos:
Para obtener más información, consulte Funciones y selectores de la utilidad de herramientas de consola.