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
DevTools puede responder todo eso. Y no escribirá ni una sola línea de código.
Este artículo le enseña la forma más simple de leer la información clave en DevTools y localizar rápidamente dónde está el problema 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 + I
Safari
Primero active el menú Desarrollo: Safari → Preferencias → Avanzado → marque "Mostrar menú Desarrollo en la barra de menú"
Cmd + Option + I
Una vez abierto, aparece un panel en la parte inferior o derecha del navegador. No se intimide por las densas pestañas — solo necesita preocuparse por tres de ellas.
Solo 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 |
Repasémoslas una por una.
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
`
No se asuste por el inglés — desgloselo:
| 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 |
No necesita entender qué significa el error. Solo necesita hacer una cosa: haga una captura de este mensaje rojo o cópielo y envíelo al desarrollador. Esa sola línea puede ahorrarles 30 minutos de búsqueda.
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
)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
(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 width
yheight— ¿están restringidas las dimensiones?
Verificar por qué el texto está truncado:
- Encuentre el elemento de texto
- Verifique la propiedad CSS overflow
— ¿está configurada enhidden? - Verifique white-space
ytext-overflow— ¿limitan los saltos de línea?
Verificar por qué un botón no se puede clicar:
- Encuentre el elemento botón
- Verifique el CSS z-index
— ¿está cubierto por otro elemento? - Verifique pointer-events
— ¿está deshabilitado el clic? - Verifique display
yvisibility— ¿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:
rojoReporte al desarrollador: "Página en blanco, Console muestra TypeError: Cannot read properties of undefined at app.js:23:5"
Caso 2: Imagen como ícono roto
Síntoma: Una imagen en la página se muestra como ícono roto o área vacía
Diagnóstico:
Reporte al desarrollador: "Imagen banner del inicio 404, URL es /images/hero-v2.png"
Caso 3: Envío de formulario no hace nada
Síntoma: Rellena el formulario, clic en enviar, sin respuesta
Diagnóstico:
rojoReporte al desarrollador: "Clic en botón de enviar no hace nada, Console muestra ReferenceError: submitForm is not defined at checkout.js:15:3"
Caso 4: Página carga muy lento
Síntoma: Abrir la página tarda 10+ segundos
Diagnóstico:
Reporte al desarrollador: "Página carga lento, product-hero.jpg (3MB) tardó 8s en cargar, recomienda comprimir"
Caso 5: Diseño móvil roto
Síntoma: En móvil, botones y texto se superponen
Diagnóstico:
para cambiar al modo de emulación de dispositivoReporte al desarrollador: "Móvil (ancho 375px) botones se superponen, falta @media (max-width: 768px) adaptación de diseño"
¿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
No necesita abrir DevTools, saber dónde está la Console, o copiar mensajes de error manualmente. Solo:
Toda la información de diagnóstico se adjunta al correo automáticamente. De detectar el problema a enviar el reporte: 30 segundos.
Resumen
La Console y el Network de DevTools son las herramientas más directas para diagnosticar problemas de sitios web. No necesita programar — solo:
Si no quiere operar DevTools manualmente cada vez, BugCapturer puede recopilar automáticamente los errores de consola y las solicitudes de red fallidas, permitiéndole enviar feedback con diagnóstico completo de la forma más simple posible.
¿Listo para reportar problemas de sitios más eficientemente?
Añadir BugCapturer a Chrome — Gratis
Recopila automáticamente errores de consola y solicitudes de red fallidas — envíe un reporte de diagnóstico de nivel profesional en 30 segundos.