Cómo abrir la consola del navegador en Chrome, Safari, Firefox y Edge

La razón más común por la que los usuarios quieren abrir la consola de su navegador es para identificar problemas con la edición de páginas, elementos de interfaz rotos, bloques que se comportan mal y otros tipos de errores y conflictos de JavaScripts. Sin embargo, cada navegador tiene sus propios accesos directos y pasos que, en última instancia, le permitirán abrir la consola y ver el back-end de una página web que visite.

Cómo abrir la consola en su navegador predeterminado

Dado que solo hay cuatro navegadores diferentes con más del 5% de participación de mercado (Chrome, Safari, Edge y Firefox), le mostraremos varias formas de abrir la consola en cada uno de ellos. Pero tenga en cuenta que con cada navegador, los elementos y errores generalmente están codificados por colores y etiquetados de manera diferente.

Cómo abrir la consola en Google Chrome

En Chrome, en realidad hay tres formas diferentes que le permitirán abrir la consola incorporada.

Independientemente de la versión de Chrome que esté usando, puede usar uno de estos accesos directos para abrir y cerrar la consola integrada:

• F12
• Ctrl + Mayús + J (Cmd + Opción + J en Mac)

Tenga en cuenta que los mismos atajos también se pueden usar para ocultar la consola. De forma predeterminada, la consola de Google Chrome ocupa exactamente la mitad de la pantalla, pero puede ajustar la proporción fácilmente a través del control deslizante en el medio y el navegador recordará la modificación la próxima vez que abra la consola.

Si desea enfocarse en un elemento específico, simplemente puede resaltarlo con el mouse y luego hacer clic derecho sobre él> Inspeccionar. Esto abrirá el Elementos pestaña y Estilos pestaña de la consola, lo que le permite concentrarse en el elemento en cuestión.

Inspeccionar un elemento con la consola de Google Chrome

Sin embargo, también puede acceder a la consola a través del menú GUI de Google Chrome. Para hacer esto, simplemente haga clic en el botón de acción en la esquina superior derecha y vaya a Más herramientas> Herramientas para desarrolladores .

Herramientas de desarrollo

Si desea trabajar de la manera más eficiente posible, aquí tiene una lista de Accesos directos de la consola de Chrome que puedes usar.

Cómo abrir la consola en Google Microsoft Edge

Como cualquier otro navegador, Microsoft Edge también tiene una herramienta de consola destinada a los desarrolladores que realizan depuración interactiva o pruebas ad hoc.

Esta herramienta registra información asociada con la página web que se está visitando. Encontrarás información relacionada con JavaScript, solicitudes de red y errores de seguridad .

La forma más sencilla de abrir la herramienta de consola en Microsoft Edge es mediante el acceso directo predefinido ( Tecla F12 ).

Pero también puede hacerlo a través del menú GUI haciendo clic en el botón de acción (esquina superior izquierda)> Más herramientas> Herramientas para desarrolladores .

Abrir las herramientas de desarrollador en Edge a través del menú GUI

Y de manera similar a la funcionalidad de los otros navegadores, Microsoft Edge también le permite inspeccionar elementos específicos usando la consola incorporada. Para hacer esto, simplemente seleccione y haga clic derecho en un elemento y elija Inspeccionar elemento.

Inspeccionando un elemento en Microsoft Edge

Aquí hay una lista con algunos atajos útiles que puede usar dentro de la consola integrada de Microsoft Edge:

Cómo abrir la consola en Mozilla Firefox

La consola incorporada en Mozilla Firefox funciona de manera un poco diferente a los otros equivalentes que hemos analizado hasta ahora. Lo que quiero decir con esto es que se abrirá automáticamente en una ventana independiente, en lugar de dividir la pantalla de su navegador por la mitad.

Esto permite un enfoque más productivo para las personas con segundas pantallas, pero puede interferir con los usuarios que necesitan trabajar con una pantalla pequeña. (Si se encuentra en este escenario, puede usar el atajo Alt + Tab para alternar entre Firefox y la Consola del navegador asociada.

Para abrir la consola del navegador integrada en Mozilla Firefox, tiene tres opciones:

• Puede utilizar el acceso directo universal: Ctrl + Mayús + J (o Cmd + Mayús + J en una Mac)
• Puede abrirlo desde el menú de acciones: haciendo clic en el menú de acciones> Desarrollador web> Consola del navegador .

Accediendo a la consola del navegador

• O puede forzar que la Consola del navegador se abra directamente iniciando Firefox desde la línea de comando y pasando el argumento '-jsconsole':

  /Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

Nota: Firefox también incluye un Consola web , que es muy similar a la consola del navegador, pero se aplica en una sola pestaña de contenido en lugar de en todo el navegador.

Cómo abrir la consola en Google Safari

A diferencia de todos los demás navegadores que hemos visto hasta ahora, la Consola de errores en Safari está deshabilitada de forma predeterminada. Debido a esto, deberá realizar un paso adicional para habilitarlo en su navegador.

Para hacer esto, abra Safari y haga clic en el Preferencias lengüeta. Una vez que esté dentro del Preferencias pestaña, haga clic en la pestaña Avanzado y marque la casilla asociada con Mostrar Desarrollar menú en la barra de menú.

Habilitando la consola en Safari

Ahora que ha hecho visible la consola, puede abrirla accediendo al Desarrollar pestaña en la parte superior y haciendo clic en Mostrar consola de errores .

Mostrar consola de errores en Safari

Manten eso en mente Safari tiene una forma dinámica de mostrar la consola de errores. Si la ventana es pequeña cuando abre la consola, la verá en una ventana completamente diferente.

En caso de que desee abrir la consola en la misma ventana que su página, deberá asegurarse de que la ventana del navegador sea de tamaño completo antes de abrir la consola de errores.

Abrir la consola de errores en Safari