Depurador remoto de Chrome: chrome-remote-devtools

https://tech.kakao.com/posts/617

El año pasado, por casualidad, fui al evento de presentación de Kakao, y desde entonces tenía vagamente la idea de que algún día yo también debía hacer algo así.

https://techblog.woowahan.com/23343/

Como hace poco en Baemin también desarrollaron algo similar, pensé: ¿ahora sí lo intento yo también...? y me puse a desarrollarlo.

Para usarlo realmente y ver los logs, pueden compilar y desplegar la página de inspector que está en el repositorio o, si no van a usar un servidor WebSocket y solo quieren revisarlos mediante logs, también pueden verlo en el playground.

Y si ejecutan el servidor web provisto, en el lado del cliente solo tienen que agregar el código del cliente de la siguiente manera:

import { initCDPClient } from '@ohah/chrome-remote-devtools-client';  
  
useEffect(() => {  
  initCDPClient('wss://your-server.com', {  
    enable: true, // Enable rrweb session recording  
  });  
}, []);  

También dejé preparada la configuración de Tauri para distribuirlo como aplicación de escritorio, pero todavía no la he publicado.

Pueden conectarse a través del servidor WebSocket y revisarlo en tiempo real, o bien, si el usuario les entrega los logs, pueden inspeccionar ese archivo de logs mediante la UI de Chrome DevTools.

Por las características de una herramienta de DevTools remota, quedaron fuera las partes de memoria y medición de rendimiento, que son difíciles de soportar, y por ahora se pueden revisar de forma sencilla Elements, Console, Network, LocalStorage, SessionStorage y Cookie.

Además, integré la función de rrweb dentro de una pestaña del depurador de Chrome DevTools para que puedan ver dentro de Chrome DevTools las acciones del usuario en pantalla.

https://ohah.github.io/chrome-remote-devtools/ko/examples/index.html

Pueden revisar un funcionamiento y funciones básicas en el enlace de arriba.

Precaución
No lo usen jamás en un entorno de producción.