Cómo abrir la consola de desarrollador de tu navegador

Estrada Web Group
Estrada Web Group
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í:

Console Web developer

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:

Consola web de desarrollo

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.

 

 

Compartir artículo:

Más artículos geniales

¿Cómo se usa this en JavaScript y para qué sirve?

¿Cómo se usa this en JavaScript y para qué sirve?

Resumen: en este artículo, aprenderás sobre la importancia y el uso de "this" en JavaScript. Comprenderás lo que significa "this" y cómo funciona en diferentes contextos

Ver artículo completo
Cómo usar la declaración if else if en JavaScript

Cómo usar la declaración if else if en JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if... else...if en JavaScript para verificar múltiples condiciones y ejecutar el bloque correspondiente si una condición es verdadera.

Ver artículo completo
Cambiar el valor seleccionado en un combobox o select con javascript y jquery

Cambiar el valor seleccionado en un combobox o select con javascript y jquery

En html existe un control llamado select y algunos lo llaman combobox, el cual nos ayuda a crear una lista desplegable con opciones para que nuestros usuarios puedan seleccionar de esta lista una opción.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla