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 la página, elementos de la interfaz rotos, bloques de mal comportamiento y otros tipos de errores y conflictos de JavaScripts. Sin embargo, cada navegador tiene sus propios atajos y pasos que, en última instancia, le permitirán abrir la consola y ver el fondo de una página web que visite.
Cómo abrir la consola en su navegador predeterminado
Dado que sólo hay cuatro navegadores diferentes con más de un 5% de cuota de mercado (Chrome, Safari, Edge y Firefox), te mostraremos múltiples formas de abrir la consola en cada uno de ellos. Pero ten en cuenta que con cada navegador, los elementos y errores están generalmente codificados con colores y etiquetados de forma diferente.
Cómo abrir la consola en Google Chrome
En Chrome, en realidad hay tres formas diferentes que te permitirán abrir la consola incorporada.
Independientemente de la estructura cromada que estés usando, puedes usar uno de estos atajos para abrir y cerrar la consola incorporada:
- F12
- Ctrl + Shift + J (Cmd + Opción + J en Mac)
Tengan en cuenta que los mismos atajos también pueden usarse para ocultar la consola. De forma predeterminada, la consola de Google Chrome ocupa exactamente la mitad de la pantalla, pero puedes ajustar la proporción fácilmente mediante el deslizador del medio y el navegador recordará la modificación la próxima vez que abras la consola.
Si quieres enfocarte en un elemento específico, puedes simplemente resaltarlo con el ratón y luego hacer clic con el botón derecho del ratón en él> Inspeccionar. Esto abrirá la pestaña Elementos y la pestaña Estilos de la consola, permitiéndote enfocar el elemento en cuestión.
Inspeccionando un elemento con la consola de Google Chrome
Sin embargo, también puedes acceder a la consola a través del menú GUI de Google Chrome. Para ello, simplemente haz clic en el botón de acción en la esquina superior derecha y ve a Más Herramientas> Herramientas para desarrolladores .
Herramientas de desarrollo
Si quieres trabajar de la forma más eficiente posible, aquí tienes una lista de los atajos de la Consola 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 para desarrolladores que hacen depuración interactiva o pruebas ad hoc.
Esta herramienta registra información asociada con la página web que se está visitando. Encontrará información relacionada con Javascript, solicitudes de red y errores de seguridad.
La forma más fácil de abrir la herramienta de la consola en Microsoft Edge es usando el atajo predefinido ( Tecla F12 ).
Pero también puedes hacerlo a través del menú de la interfaz gráfica de usuario haciendo clic en el botón de acción (esquina superior izquierda)> Más herramientas> Herramientas para desarrolladores .
Abriendo las herramientas de desarrollo en Edge a través del menú de la GUI
Y de forma similar a la funcionalidad de los otros navegadores, Microsoft Edge también permite inspeccionar elementos específicos usando la consola incorporada. Para ello, simplemente selecciona y haz clic con el botón derecho del ratón en un elemento y elige Inspeccionar elemento.
Inspeccionando un elemento en Microsoft Edge
Aquí hay una lista con algunos atajos útiles que puedes usar dentro de la consola incorporada de Microsoft Edge:
Lanzamiento de la consola en modo de enfoque Ctrl + Shift + J Cambio a la consola Ctrl + 2 Mostrar u ocultar la consola de otra pestaña de DevTools Ctrl + ` (back tick)Ejecutar (single- comando de línea) Introducir Salto de línea sin ejecutar (multi- comando de línea) Shift + Enter or Ctrl + Enter Clear the Console of all mensajes Ctrl + L Filtrar los registros (ajustar el enfoque a la caja de búsqueda) Ctrl + F Aceptar auto- Sugerencia de finalización (cuando está en foco) Enter o Tab Sugerencia de autocompletar anterior/siguiente Tecla de flecha arriba / Tecla de flecha abajo
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 del navegador por la mitad.
Esto permite un enfoque más productivo para las personas con segundas pantallas, pero podría interponerse en el camino de los usuarios que necesitan trabajar con una pantalla pequeña. (Si estás en este escenario, puedes usar el atajo Alt + Tab para ir y venir entre Firefox y la Consola del Navegador asociada.
Para abrir la consola del navegador incorporado en Mozilla Firefox, tienes tres opciones:
- Puedes usar el atajo universal – Ctrl + Shift + J (o Cmd + Shift + J en un Mac)
- Se puede abrir desde el menú de acción – Haciendo clic en el menú de acción> Desarrollador Web> Consola de Navegación .
Acceder a la consola del navegador
-
O puedes forzar a la consola del navegador a abrirse directamente lanzando Firefox desde la línea de comandos y pasando el argumento $0027-jsconsole$0027:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
Nota: Firefox también incluye una 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 de Safari está desactivada de forma predeterminada. Por eso, tendrás que hacer un paso más para habilitarla en tu navegador.
Para ello, abre Safari y haz clic en la pestaña Preferencias . Una vez dentro de la pestaña Preferencias , haz clic en la pestaña Avanzado y marca la casilla asociada a Mostrar el menú Desarrollo en la barra de menús.
Activando la consola en Safari
Ahora que has hecho visible la consola, puedes abrirla accediendo a la pestaña Desarrollar en la parte superior y haciendo clic en Mostrar consola de errores .
Mostrar la consola de errores en Safari
Tengan en cuenta que Safari tiene una forma dinámica de mostrar la consola de errores. Si la ventana es pequeña al abrir la consola, la verás en una ventana completamente diferente.
En caso de que quieras abrir la consola en la misma ventana de tu página, tendrás que asegurarte de que la ventana del navegador sea de tamaño completo antes de abrir la consola de Error.
Abriendo la consola de errores en Safari