Débogueur Chrome distant chrome-remote-devtools

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

L’an dernier, il m’est arrivé par hasard d’assister à une présentation de Kakao, et je gardais vaguement en tête l’idée qu’un jour, il faudrait que j’essaie d’en créer un moi aussi.

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

Récemment, comme Baemin en avait aussi développé un similaire, je me suis dit qu’il était temps que je m’y mette moi aussi… et je l’ai développé.

Pour un usage réel, si vous voulez consulter les logs, vous pouvez soit builder et déployer la page inspector présente dans le dépôt, soit, si vous n’utilisez pas de serveur WebSocket et que vous comptez vérifier uniquement les logs, les consulter dans le playground.

Ensuite, exécutez le serveur web fourni, puis côté client, ajoutez le code du client comme ci-dessous.

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

J’ai aussi préparé la configuration Tauri pour une distribution en application desktop, mais je ne l’ai pas encore publiée.

Vous pouvez vous connecter via le serveur WebSocket pour vérifier les informations en temps réel, ou bien, si un utilisateur vous transmet les logs, consulter ce fichier de logs via l’UI de Chrome DevTools.

En raison de la nature des DevTools distants, j’ai exclu les parties difficiles à prendre en charge, comme la mémoire ou les mesures de performance. En revanche, il est possible de consulter simplement Elements, Console, Network, LocalStorage, SessionStorage et les cookies.

J’ai également intégré la fonctionnalité rr-web dans un onglet à l’intérieur du débogueur Chrome DevTools, afin de pouvoir voir les actions de l’écran utilisateur directement dans Chrome DevTools.

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

Vous pouvez vérifier le fonctionnement et les fonctionnalités de base via le lien ci-dessus.

Points d’attention
Ne l’utilisez jamais en environnement de production