Seguramente alguien ya te ha pedido que “abras el inspector y le digas qué pone la consola”. Aquí está cómo hacerlo en un Mac, en los dos navegadores - y en Safari hay que activar antes un ajuste, que es la razón por la que esta pregunta se hace dos veces.
Chrome
Tres maneras, y la primera es la que hay que recordar.
- Haz clic derecho en lo que se ve mal y elige Inspeccionar. El panel se abre con ese elemento ya seleccionado, que es de lo que se trata: preguntabas por este botón, no por la página.
- ⌥⌘I abre el panel estés donde estés.
- ⌥⌘J lo abre directamente en la pestaña Consola, que es lo que suele querer quien dice “mira si hay errores”.
El panel se abre al lado o debajo de la página. Arrastra su borde si queda demasiado estrecho, y usa el menú de tres puntos de su esquina superior derecha para moverlo abajo, que va mejor en la pantalla de un portátil.
Safari
Safari esconde todo esto hasta que se lo pides, y este es el paso que la gente se salta.
- Abre Safari → Configuración (⌘ coma).
- Elige la pestaña Avanzado.
- Marca Mostrar funciones para desarrolladores web.
Aparece un menú Desarrollo en la barra de menús, y solo entonces funciona el resto:
- Clic derecho → Inspeccionar elemento sobre cualquier parte de la página.
- ⌥⌘I abre el Inspector web.
- ⌥⌘C lo abre directamente en la consola.
En versiones anteriores de macOS la casilla se llama “Mostrar el menú Desarrollo en la barra de menús”, en el mismo sitio. Si no encuentras ninguna de las dos, estás mirando la configuración de otra aplicación - Safari tiene que ser la ventana en primer plano.
Leer la consola, que es lo que probablemente te habían pedido
La consola es la pestaña que responde a “¿hay algo roto?”. Guarda los mensajes que la página escribió mientras la usabas, y vienen en tres clases que conviene distinguir.
- Normalmente no es el problema
- Avisos en amarillo, y mensajes de analítica, widgets de chat, scripts de publicidad o extensiones del navegador. Largos, ruidosos y en su mayoría de otros
- Merece la pena contarlo
- Errores en rojo, y sobre todo el primero. Un error que menciona un archivo de la propia dirección del sitio tiene muchas más papeletas de ser el fallo que los doce que nombran a un tercero
Dos apuntes prácticos. Muchas veces los errores ya están ahí antes de que hagas nada, restos de la carga, así que recarga la página y luego haz lo que falla: el error que buscas es el que aparece en el momento en que se rompe. Y la consola tiene un cuadro de filtro: teclear parte de una palabra reduce cien líneas a la única que necesitas.
Para pasar un error a otra persona, haz clic derecho en la línea roja y cópiala, o selecciónala y pulsa ⌘C. Una captura de pantalla también sirve, siempre que se vea la línea entera.
La pestaña Red, para cuando no carga nada
Si la página se ve vacía en vez de mal, puede que la consola no diga nada y la pestaña Red lo diga todo. Ábrela, recarga y mira la columna Estado: los números en los 400 y los 500 son peticiones que fallaron, y la URL de al lado dice qué intentaba traerse la página. Esa es la diferencia entre “el sitio está roto” y “una petición a una dirección volvió con un 503”.
Inspeccionar una página que está en tu iPhone
No en el teléfono. El Inspector web de Safari corre en el Mac y se engancha al teléfono por cable: activa el Inspector web en el teléfono en Ajustes → Apps → Safari → Avanzado, conéctalo y el dispositivo aparece en el menú Desarrollo del Mac. El procedimiento completo, y qué hacer sin un Mac, es un artículo aparte.
Es la herramienta adecuada para un fallo que solo pasa en el móvil y la equivocada para alguien que no está sentado al lado de un Mac, que es la mayoría de quienes acaban de encontrarse un fallo que solo pasa en el móvil.
Session Replay
Extensión de Chrome gratuita. Un clic en la página que se está portando mal captura la captura de pantalla, la consola y el registro de red, y te da un enlace para pegar en el ticket.
Si eres tú quien se lo pide a otra persona
Merece la pena decirlo claro, porque este artículo existe sobre todo porque esa petición se hace.
Pedirle a un compañero, a un tester o a un cliente que abra las herramientas de desarrollo, encuentre la pestaña correcta, juzgue qué líneas rojas importan y las copie con precisión es pedirle varias habilidades a la vez. La mayoría manda la primera línea roja que ve, que suele ser un aviso de analítica, y el intercambio cuesta dos mensajes y un día.
La instrucción que funciona, si vas a preguntar de todos modos: recarga, haz lo que se rompe, abre la consola con ⌥⌘J y mándame todo lo que esté en rojo. Precisa, y pone el juicio de tu lado en vez del suyo.
La alternativa es no preguntar. Si la mitad técnica de un informe la puede capturar la persona que pulsa un botón, saber dónde vive la consola deja de ser un requisito para informar de un fallo - y el informe de error llega con lo que pasó, lo que se esperaba, y los registros de consola y de red ya adjuntos.
Referencia rápida
- Chrome: clic derecho → Inspeccionar, o ⌥⌘I, o ⌥⌘J para la consola.
- Safari: Configuración → Avanzado → Mostrar funciones para desarrolladores web, y luego ⌥⌘I o ⌥⌘C.
- Recarga antes de reproducir, para que los errores que veas sean los del fallo.
- Las líneas rojas que mencionan la dirección del propio sitio son las que más importan; la primera más que el resto.