Cómo inspeccionar elementos en Windows y cuál es el panel para cada pregunta

En Windows la respuesta es F12, eso es todo. No hay un menú que activar primero, no hay un segundo dispositivo, no hay cable. Chrome, Edge y Firefox abren sus herramientas de desarrollo con la misma tecla, y a diferencia de una Mac o un iPhone, no hay nada que se interponga.

Esto significa que si estás leyendo esto, abrirlas probablemente no es en lo que estés atascado. La parte que hace perder una tarde a la gente es lo que viene después: te pidieron algo específico, el panel que tienes delante no es obviamente lo que buscas, y las herramientas no te dicen cuál de las ocho pestañas contiene la respuesta.

Abrirlas

Chrome y Edge, que son las mismas herramientas porque Edge está basado en Chromium:

• F12 o Ctrl+Shift+I abre el panel que usaste último.
• Ctrl+Shift+J abre la Consola directamente.
• Ctrl+Shift+C abre Elementos y activa el selector de elementos al mismo tiempo.

Firefox difiere en una de las tres:

• F12 abre las herramientas.
• Ctrl+Shift+K abre la Consola web.
• Ctrl+Shift+C abre el Inspector con el selector activado, igual que Chrome.

Haz clic derecho en cualquier cosa de la página y elige Inspeccionar para lograr lo mismo que Ctrl+Shift+C, con la ventaja de que selecciona el elemento en el que hiciste clic. En un portátil donde la fila superior está configurada con teclas multimedia, F12 puede requerir Fn+F12. Los atajos Ctrl+Shift evitan la cuestión por completo.

El detalle que más tiempo hace perder

Lee de nuevo el primer atajo: F12 abre el panel que usaste último. La propia documentación de Microsoft lo dice exactamente así, y Chrome se comporta igual.

Así que la única tecla que todos conocen es la que no te dice dónde acabarás. Alguien que usó último la pestaña Red presiona F12, ve un muro de solicitudes, y llega a la conclusión de que la consola está vacía. La consola no está vacía. Solo que no la están mirando.

Por eso Ctrl+Shift+J vale más que F12. Es el atajo que significa “lo que mi colega realmente me pidió”.

Cuál es el panel para cada pregunta

Las dos solicitudes que suenan parecidas pero no lo son:

“Inspeccionar elemento” significa la pestaña Elementos. La pregunta detrás es sobre lo que hay en la página: por qué este botón es del color equivocado, por qué el texto está cortado, cómo se llama este div. Estás mirando el HTML activo y el CSS aplicado a él.

“Abre la consola y dime qué dice” significa la pestaña Consola. La pregunta detrás es sobre qué salió mal mientras se ejecutaba la página. Las líneas rojas aquí son errores de JavaScript, y uno de ellos es muy a menudo la razón por la que el botón no hizo nada.

Son preguntas diferentes y tienen respuestas diferentes, por eso enviar una captura de la pestaña Elementos a alguien que preguntaba sobre la consola no ayuda a nadie.

El tercero, que la gente pide con menos frecuencia y que responde más:

“Envíame la pestaña de red” significa la pestaña Red, y se trata de lo que la página pidió y qué volvió. Cómo abrirla y qué significa XHR es su propia guía corta, porque tiene una trampa: solo registra mientras está abierta.

Débil

"Abrí inspeccionar elemento y no veo nada malo."

Mejor

"Pestaña de consola, dos líneas rojas: Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Ocurre cuando presiono Pagar, nada más cambia en la página."

Qué copiar y qué no

Una vez que encuentres la línea roja, lo útil es el texto, no una fotografía de él.

Haz clic derecho en un mensaje de la consola y obtienes opciones de Copiar. Copiar el texto del mensaje le da a quien preguntó algo que puede buscar en su propio código. Una captura de pantalla le da algo que tiene que escribir de nuevo, y las capturas de consola suelen estar recortadas justo encima del nombre del archivo y número de línea, que es la parte que la ubicaría.

Dos cosas que merecen ser incluidas y que la gente deja fuera:

• Expande el error primero. Un error contraído muestra una línea. La flecha al lado abre el rastreo de pila, y el rastreo es lo que señala dónde sucedió.
• Di qué hiciste. Un error de consola sin una acción al lado es un hecho sin causa. “Aparece cuando presiono Pagar” lo convierte en algo reproducible.

Dos cosas específicas de Windows que vale la pena saber

Una actualización forzada es Ctrl+F5 o Ctrl+Shift+R. Cuando alguien dice “funciona para mí”, un archivo en caché anticuado es una de las razones ordinarias, y una actualización forzada es la forma de treinta segundos de descartarlo antes de que alguien empiece a buscar en el código.

Ctrl+Shift+P abre el Menú de comandos, que es un cuadro de búsqueda para cada función de las herramientas. Si sabes qué quieres pero no dónde vive, escribirlo allí es más rápido que buscar en paneles, y es la forma más rápida de salir del problema “¿en cuál pestaña estaba?” en el momento en que tienes más de tres abiertas.

Qué llevarse de aquí

En Windows, abrir las herramientas nunca fue la parte difícil. Saber cuál de ellas se pedía es lo importante.

Ctrl+Shift+J para la consola, Ctrl+Shift+C para el elemento, y F12 solo cuando ya sabes dónde lo dejaste. Luego copia el texto en lugar de fotografiarlo, expande el error antes de copiarlo, y di qué estabas haciendo cuando apareció. Eso convierte “eché un vistazo y parece estar bien” en un reporte con el que alguien puede actuar sin una segunda conversación.