console.error no es todo — la Output Console captura los errores que no ves
La Output Console de JustZix muestra lo que una página escribe en la consola — sin abrir las DevTools. Pero durante mucho tiempo mostraba solo lo que el código llamaba explícitamente mediante console.log. Y la mitad de lo que ves en las DevTools no viene de console.log en absoluto. Desde la versión 2.13.86 esto ha cambiado.
console.error no es lo mismo que un error
Es fácil confundir dos cosas:
console.error('algo')— el código registra deliberadamente algo a nivel error.throw new Error('algo')— el código se ha estrellado. Nadie ha llamado aconsole.error. Y sin embargo las DevTools muestran una entrada roja con un stack trace.
Chrome captura los crashes por sí mismo y los muestra en la consola. Si la Output Console solo envuelve console.*, esos crashes se le escapan — y son a menudo las cosas más importantes, porque son lo que rompe la página.
Qué se captura ahora
1. Excepciones no gestionadas
Un throw no gestionado, un error de sintaxis, un error en runtime — Chrome dispara entonces un evento error sobre el objeto window. La Output Console escucha ese evento y registra el mensaje junto al stack trace y una ubicación archivo:línea:columna.
2. Rejections de promesas no gestionados
Un someAsync().then(...) sin .catch, o un await que ha lanzado y nadie lo ha capturado — Chrome dispara un evento unhandledrejection. La Output Console lo escucha y muestra el motivo del rejection como entrada error con el prefijo «Unhandled promise rejection».
Por qué la fase de capture
Ambos listeners están conectados en la fase de capture. El motivo: la página puede tener también su propio handler error o unhandledrejection que llama a preventDefault() o stopPropagation(). La fase de capture se ejecuta antes de la fase de bubbling, así que la Output Console ve el evento antes de que el código de la página pueda silenciarlo.
Un test de 30 segundos
Abre una JS Console (o una TEMP JS Console mediante Ctrl+Alt+J) y escribe:
throw new Error('test boom')Una entrada roja con un stack trace debería aparecer en la Output Console. Ahora:
Promise.reject('async boom')«Unhandled promise rejection: async boom» debería aparecer. Si ves ambos — la captura de errores funciona.
Qué todavía NO capturamos — y por qué
- Violaciones CSP. Tienen un evento
securitypolicyviolationseparado — añadible más tarde, fuera de alcance por ahora. - Errores de red 4xx/5xx. Un
fetchfallido con un 404 o 500 es una respuesta completada con éxito — Chrome la muestra en la pestaña Network, no en la consola. La capturamos solo si tu código lanza por sí mismo tras verificarresponse.ok. - Avisos internos de Chrome. Los mensajes como «Autofocus processing was blocked» los genera el navegador mismo — no pueden interceptarse a nivel de página.
- Fallos de carga de recursos. Un
<img>o<script>fallido a veces lo captura el listenererroren fase de capture, pero no siempre — depende del tipo de recurso.
Son límites deliberados, no lagunas. La Output Console muestra los errores JavaScript de la página — lo que normalmente quieres ver — no todo el ruido diagnóstico del navegador.
Caso de uso — monitorización de producción sin DevTools
Engancha una Output Console al borde de la pestaña y déjala. Abre tu sitio tras un deploy — si algo se estrella, lo ves enseguida, aunque el error no venga de tu console.error. Para un tester QA es la diferencia entre «la página parece OK» y «la página parece OK, pero en segundo plano se dispara un TypeError no gestionado».
Mira también
- Output Console — la descripción completa de la ventana
- TEMP pane — Output Console bajo el atajo Ctrl+Alt+K
- Inyectar en páginas con CSP estricta — cómo funciona el hook de la consola
Instala JustZix — y ve los errores de la página antes que tus usuarios.
Valora este artículo
Sin valoraciones — sé el primero.