DevTools no es solo para programadores
Probablemente haya oído hablar de "Developer Tools" (DevTools) y asumido que es algo que solo usan los programadores. Pero la verdad es que muchas funciones de DevTools funcionan sin ningún conocimiento de programación. Imagínese estos escenarios:- Abre un sitio web y la página está en blanco — quiere saber si el sitio cayó o es su red
- Rellena un formulario, hace clic en enviar, y no pasa nada — quiere saber si el botón está roto o el servidor nunca lo recibió
- Ve un diseño extraño en una página — quiere saber si es un problema del navegador o un bug en el código del sitio
Paso 1: Cómo abrir DevTools
Chrome / Edge
Tres formas, elija la más cómoda:F12 o Ctrl + Shift + I (Mac: Cmd + Option + I)Firefox
F12 o Ctrl + Shift + ISafari
Primero active el menú Desarrollo: Safari → Preferencias → Avanzado → marque "Mostrar menú Desarrollo en la barra de menú"Cmd + Option + ISolo necesita conocer 3 pestañas
DevTools tiene una docena de pestañas, pero los no desarrolladores solo necesitan estas tres:| Pestaña | Qué hace | Para qué puede usarla |
|---|---|---|
| Console | Muestra los errores y advertencias del sitio | Saber si el código del sitio tuvo un error |
| Network | Muestra todas las solicitudes de red | Saber si imágenes/APIs/recursos fallaron al cargar |
| Elements | Muestra el HTML y CSS de la página | Inspeccionar el estilo y posición de un elemento |
La pestaña Console: leer mensajes de error rojos
Qué es la Console
La Console es la "caja negra" del sitio. Cuando el código del sitio tiene un error, el navegador lo registra aquí. Piénselo como la luz de advertencia de un auto — no necesita entender cómo funciona el motor, pero necesita saber qué luz está encendida.Rojo = Error, Amarillo = Advertencia
- 🔴 Mensaje rojo: Ocurrió un error, preste atención
- 🟡 Mensaje amarillo: Una advertencia, posible problema pero no fatal
- 🔵 Mensaje azul/blanco: Registro ordinario, ignore sin problema
Cómo leer un mensaje de error
Después de abrir la Console, podría ver un texto rojo como este:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.jsx:47:18
| Parte | Significado | En qué enfocarse |
|---|---|---|
TypeError |
Error de tipo | Tipo de error |
Cannot read properties of undefined |
Intentó leer datos inexistentes | Descripción del problema (solo tradúzcalo) |
ProductList.jsx:47:18 |
Dónde falló: nombre de archivo línea 47, columna 18 | Dígale al desarrollador dónde arreglar |
Tipos de error comunes (traducidos)
| Error en inglés | Significado en español | Causa posible |
|---|---|---|
TypeError |
Error de tipo | Formato de datos incorrecto; el código esperaba un objeto pero recibió vacío |
ReferenceError |
Error de referencia | El código usó una variable o función inexistente |
SyntaxError |
Error de sintaxis | Sintaxis de código errónea que el navegador no puede analizar |
RangeError |
Error de rango | Un valor excedió el rango permitido |
Network Error |
Error de red | La solicitud nunca llegó al servidor |
404 Not Found |
No encontrado | El recurso solicitado no existe |
500 Internal Server Error |
Error interno del servidor | Un bug en el código del servidor |
Los 5 problemas de Console más comunes
1. Página en blanco + TypeError La página carga en blanco, Console muestra un TypeError rojo. Usualmente un crash de JavaScript impidió el renderizado. 2. Una función no responde + ReferenceError Clic en un botón, nada pasa, Console muestra un ReferenceError rojo. Usualmente el código relacionado no se cargó correctamente. 3. Datos no se muestran + TypeError: Cannot read properties of undefined Un área de lista o tabla está vacía, Console tiene este error. Usualmente el backend devolvió datos en un formato que el frontend no esperaba. 4. Parte de la página en blanco + error 404 Algunas imágenes o componentes no se muestran, Console tiene un 404. La ruta del recurso está mal o el archivo fue eliminado. 5. Carga muy lenta + muchas advertencias amarillas La página carga lento, Console tiene muchas advertencias amarillas. Posiblemente se cargaron demasiados recursos innecesarios o hay un problema de rendimiento.La pestaña Network: detectar recursos fallidos
Qué es Network
La pestaña Network registra cada solicitud de red que la página hace al cargar — imágenes, CSS, JavaScript, puntos de API, archivos de fuente, todo lo obtenido del servidor.Cómo usarla
F5)Codificación de color
| Color | Significado |
|---|---|
| Rojo | Solicitud fallida (error 4xx/5xx) |
| Gris | Solicitud bloqueada o cancelada |
| Otros colores | Solicitud exitosa |
Enfoque: códigos de estado
Cada solicitud tiene un código de estado — la pista más directa del problema:| Estado | Significado | Qué ve |
|---|---|---|
| 200 | Éxito | Todo normal |
| 301/302 | Redirección | Rebotado a otra dirección |
| 400 | Solicitud incorrecta | Formato de datos de formulario erróneo |
| 401 | No autorizado | Necesita login pero no está conectado |
| 403 | Prohibido | Sin permiso para este recurso |
| 404 | No encontrado | Imagen/página/API no existe |
| 429 | Demasiadas solicitudes | Limitado, intente más tarde |
| 500 | Error interno del servidor | Un bug en el código del servidor |
| 502 | Puerta de enlace errónea | Servidor sobrecargado o en mantenimiento |
| 503 | Servicio no disponible | Servidor no puede procesar solicitudes temporalmente |
Ejercicio: diagnosticar "imagen no carga" con Network
Img (solo imágenes)- 404 → ruta de imagen incorrecta o imagen eliminada
- 500 → el servidor erró al procesar la solicitud de imagen
- Ninguna solicitud correspondiente → la URL de imagen nunca se solicitó (probablemente problema de código frontend)
Ejercicio: diagnosticar "envío de formulario no hace nada" con Network
La pestaña Elements: inspeccionar estilos de elemento
Qué es Elements
La pestaña Elements muestra la estructura HTML y los estilos CSS de la página. Puede usarla para inspeccionar los atributos, estilos y posición de un elemento.Función más útil: inspeccionar elemento
Qué pueden hacer los no desarrolladores
Verificar por qué una imagen se muestra mal:- Encuentre la etiqueta
<img>
- Verifique el atributo
src— ¿es correcta la URL de la imagen?
- Verifique
widthyheight— ¿están restringidas las dimensiones?
- Encuentre el elemento de texto
- Verifique la propiedad CSS
overflow— ¿está configurada enhidden?
- Verifique
white-spaceytext-overflow— ¿limitan los saltos de línea?
- Encuentre el elemento botón
- Verifique el CSS
z-index— ¿está cubierto por otro elemento?
- Verifique
pointer-events— ¿está deshabilitado el clic?
- Verifique
displayyvisibility— ¿está oculto?
Nota: las ediciones en Elements son temporales
Cualquier estilo que cambie en la pestaña Elements vuelve después de actualizar la página. Solo sirve para depurar y no cambiará realmente el sitio. Experimente libremente — no puede romper nada.5 casos reales
Caso 1: Página en blanco
Síntoma: Abre el sitio, la página está en blanco Diagnóstico:TypeError rojoCaso 2: Imagen como ícono roto
Síntoma: Una imagen en la página se muestra como ícono roto o área vacía Diagnóstico:srcCaso 3: Envío de formulario no hace nada
Síntoma: Rellena el formulario, clic en enviar, sin respuesta Diagnóstico:ReferenceError: submitForm is not defined rojoCaso 4: Página carga muy lento
Síntoma: Abrir la página tarda 10+ segundos Diagnóstico:Caso 5: Diseño móvil roto
Síntoma: En móvil, botones y texto se superponen Diagnóstico:Ctrl + Shift + M para cambiar al modo de emulación de dispositivo@media — encuentra que falta la adaptación móvil¿Existe una forma más fácil?
Si abrir DevTools, buscar la Console, encontrar Network y copiar mensajes de error le sigue pareciendo demasiado — hay una forma más simple. BugCapturer puede hacer todo eso automáticamente por usted. Cuando hace una captura y envía feedback con BugCapturer, recopila automáticamente:- Errores de consola: hasta 10 registros de nivel error (con nombre de archivo y número de línea)
- Solicitudes de red fallidas: hasta 5 solicitudes con estado ≥ 400 (con URL, método, código de estado)
- Información de entorno técnico: URL, navegador, SO, resolución de pantalla, tamaño de viewport, DPR