Cómo abrir la consola del navegador (Chrome, Safari)

¿Qué es la consola del navegador?

La consola del navegador es un panel de las herramientas para desarrolladores integradas en el navegador que muestra los errores de JavaScript, las advertencias y los registros (logs) de una página web. Para abrirla: en Chrome o Edge pulsa F12 o Ctrl+Shift+J (Cmd+Option+J en Mac), en Firefox Ctrl+Shift+K (Cmd+Option+K en Mac) y, en Safari, activa primero el menú Desarrollador en la configuración y después pulsa Option+Cmd+C. A continuación tienes los pasos completos para cada navegador.

Atajos de teclado de la consola del navegador (todos los navegadores)

Navegador Windows / Linux macOS Atajo directo al panel Console
Chrome F12 o Ctrl+Shift+I Cmd+Option+I Ctrl+Shift+J / Cmd+Option+J
Microsoft Edge F12 o Ctrl+Shift+I Cmd+Option+I Ctrl+Shift+J / Cmd+Option+J
Firefox F12 o Ctrl+Shift+I Cmd+Option+I Ctrl+Shift+K / Cmd+Option+K
Safari (sin versión para Windows) Cmd+Option+I Option+Cmd+C (hay que activar antes el menú Desarrollador)

> Truco para recordar: en Chrome, Edge y Firefox, F12 abre siempre las herramientas para desarrolladores completas (DevTools); lo único que cambia de un navegador a otro es el atajo que salta directamente al panel Console.

Cómo abrir la consola en Chrome (3 métodos)

Atajo de teclado: en Windows, pulsa Ctrl+Shift+J para ir directamente al panel Console, o pulsa F12 para abrir las DevTools completas y haz clic en la pestaña "Console" de la parte superior. En Mac equivale a Cmd+Option+J / Cmd+Option+I.
  • Menú contextual: haz clic derecho en cualquier parte de la página → elige "Inspeccionar" → cambia a la pestaña Console.
  • Ruta de menú: menú ⋮ (arriba a la derecha) → Más herramientas → Herramientas para desarrolladores.
  • Comprueba que se abrió bien: escribe console.log('test') en la consola y pulsa Enter. Si devuelve test, todo funciona correctamente.

    Cómo abrir la consola en Microsoft Edge

    Edge comparte la base Chromium con Chrome, así que los pasos son casi idénticos:

    F12 (Windows) o Cmd+Option+I (Mac) para abrir las DevTools y cambia a la pestaña Console.
  • Para abrir la consola directamente: Ctrl+Shift+J (Windows) / Cmd+Option+J (Mac).
  • El clic derecho sobre la página → "Inspeccionar" funciona igual.
  • Cómo abrir la consola en Firefox

    La consola de Firefox se llama Consola del navegador y su punto de entrada es algo distinto:

    Atajo directo: en Windows pulsa Ctrl+Shift+K; en Mac, Cmd+Option+K. Ten en cuenta que F12 en Firefox abre la caja de herramientas completa; a la pestaña de la consola tienes que cambiar manualmente.
  • Clic derecho en la página → "Inspeccionar elemento" → cambia a la pestaña "Consola" en la parte superior.
  • Ruta de menú: menú ☰ (arriba a la derecha) → Más herramientas → Herramientas para desarrolladores web.
  • Lo distintivo de la Consola del navegador de Firefox es que integra la visualización de peticiones de red: errores y peticiones fallidas se ven en el mismo panel.

    Cómo abrir la consola en Safari (solo Mac: activa antes el menú Desarrollador)

    Safari es el único navegador popular que exige un paso previo de configuración, y por eso "cómo abrir la consola en Safari" genera tantas búsquedas:

    Safari → Configuración.
  • Cambia a la pestaña Avanzado.
  • Marca, al final de todo, "Mostrar el menú Desarrollador en la barra de menús".
  • A partir de ahí, podrás abrir la consola cuando quieras con Desarrollador → Mostrar consola JavaScript (o con el atajo Option+Cmd+C).
  • ¿Qué debes mirar en la consola?

    Con la consola abierta, céntrate en tres tipos de mensajes (filtra por gravedad; normalmente arriba a la izquierda del panel):

    Tipo Significado Valor al informar de un bug
    Error (rojo) Fallo de ejecución de JavaScript o de carga de un recurso El más valioso: suele apuntar directamente a la causa raíz
    Advertencia (amarillo) Problemas potenciales (API obsoletas, avisos de CORS, etc.) Pistas complementarias
    Log Mensajes que la propia página imprime Normalmente prescindible

    Además, el panel de red (Network) suele usarse junto con la consola: cuando la consola indica "error al cargar", cambia a Network y recarga la página para ver exactamente qué petición falló (en rojo) y su código de estado (404/500, etc.).

    ¿No eres desarrollador? Deja que una herramienta capture los errores por ti

    Leer la consola a mano pone dos barreras delante de los usuarios no técnicos: saber qué errores importan y copiar los detalles sin perder nada. Si tu tarea es recopilar feedback de bugs (QA, soporte, product managers, revisiones con el cliente), puedes dejar ese paso en manos de una herramienta:

    • BugCapturer (extensión gratuita de Chrome) captura automáticamente los errores de la consola y las peticiones de red fallidas de la página actual mientras haces capturas de pantalla o grabas la pantalla, y los empaqueta con capturas anotadas e información del entorno en un solo informe. No necesitas abrir las DevTools: los errores ya van adjuntos.
    • Tras generar un enlace para compartir (se conserva 30 días de forma anónima / 90 días con sesión iniciada), quien desarrolla abre el enlace y ve a la vez "lo que mostraba la interfaz" y "lo que decía la consola"; se acabó lo de "pásame una captura de tu consola".

    Para una visión más amplia, consulta Browser DevTools for Non-Developers.

    FAQ

    P: ¿Por qué F12 no abre la consola? R: Tres causas posibles: ① algunos portátiles requieren Fn+F12; ② con la página a pantalla completa, el atajo puede quedar capturado por un juego o un vídeo: sal primero de pantalla completa; ③ algunos sitios desactivan el clic derecho, pero los atajos de teclado siguen funcionando. También puedes abrir la consola manualmente desde el menú del navegador.

    P: ¿Un error en la consola significa siempre que la web tiene un bug? R: No necesariamente. Muchos errores son inofensivos (scripts de terceros que fallan, ruido de extensiones). Lo decisivo es si el error aparece al mismo tiempo que el problema visible: un Error rojo nuevo que surge justo cuando se reproduce el problema es la pista que cuenta.

    P: ¿Cómo envío los errores de la consola a un desarrollador? R: Clic derecho en el panel Console → "Guardar como…" exporta el registro completo; o haz una captura de la zona del error. Aún más cómodo es usar una herramienta de captura automática: BugCapturer adjunta los errores de consola/red al informe de bug y genera un enlace para compartir, así nada se pierde al copiar a mano.

    P: ¿Se puede abrir la consola en navegadores móviles (iOS/Android)? R: Los navegadores móviles no tienen consola integrada. Necesitas un ordenador para conectarlos mediante depuración remota (chrome://inspect en Chrome, o el menú Desarrollador de Safari con un iPhone). Cuando usuarios móviles informan de bugs, una extensión como BugCapturer captura datos de escritorio; si el problema solo ocurre en el móvil, indica el dispositivo y la versión del sistema.

    Conclusión

    Con tres grupos de atajos cubres el 95 % de los casos: Chrome/Edge con Ctrl+Shift+J (Cmd+Option+J en Mac), Firefox con Ctrl+Shift+K (Cmd+Option+K en Mac) y Safari, activando antes el menú Desarrollador y usando Option+Cmd+C. El valor de la consola es convertir "la página falla" en "la línea X falla por Y"; y si tu trabajo es informar de problemas y no arreglarlos, dejar que una herramienta capture los errores de la consola automáticamente es el camino más cómodo.

    Lecturas recomendadas: Browser DevTools for Non-Developers · How to Report Bugs Effectively

    Deja de describir errores,
    muéstralos.
    Instala en segundos y convierte hoy tu primer informe de error en un enlace para compartir.
    Añadir a Chrome — Gratis