Cómo abrir la consola de desarrollador de tu navegador

Resumen: en este tutorial, aprenderás cómo abrir la Consola de las herramientas de desarrollo web.

Las herramientas de desarrollo web te permiten probar y depurar el código JavaScript, Las herramientas de desarrollo web a menudo se denominan devtools. Los navegadores web como Google Chrome, Firefox, Edge, Safari y Opera proporcionan las herramientas de desarrollo como funciones integradas.

En general, las herramientas de desarrollo te permiten trabajar con una variedad de tecnologías web, como HTML, CSS, DOM y JavaScript. En este tutorial, aprenderás cómo abrir la Consola de las herramientas de desarrollo para ver los mensajes generados por JavaScript.

Firefox

Primero, abra el archivo devtools.html.

El archivo devtools.html tiene el siguiente código JavaScript:

<script>
    console.log('Hello, te saluda Estrada Web Group!');
    // the following code causes an error
    let greeting = msg;
</script>

En segundo lugar, presiona F12 en Windows o Cmd+Opt+J si estás en Mac.

Las herramientas de desarrollo abrirán la pestaña de Consola de forma predeterminada. Se verá así:

El primer mensaje es 'Hello, te saluda Estrada Web Group!' que es la salida del siguiente comando:

console.log('Hello, te saluda Estrada Web Group!');

Para generar el valor de la variable, utiliza el siguiente método console.log(). Por ejemplo:

let message = 'Buenos días te desea Estrada Web Group!';
console.log(message);

El segundo mensaje que aparece en la pestaña Consola es un error.

Uncaught ReferenceError: msg is not defined

Esto se debe a que la variable msg no se definió en el código, pero se hizo referencia a ella en el código.

Ahora, puedes ver los mensajes normales emitidos por console.log() y los mensajes de error. Es suficiente para empezar. Nos sumergiremos en las herramientas de desarrollo en los siguientes artículos.

Google Chrome y Edge

Por lo general, se abre la pestaña Consola de las herramientas de desarrollo en Firefox y Edge presionando F12. Tienen interfaces de usuario similares.

Safari

Si estás utilizando el navegador Safari en Mac, primero debes habilitar el Menú de desarrollador:

Y luego presiona Cmd+Opt+C para mostrar la ventana de la consola:

En este tutorial, aprendiste cómo abrir la pestaña Consola de las herramientas de desarrollo para verificar los mensajes enviados por el código JavaScript.