Remote-Chrome-Debugger `chrome-remote-devtools`

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

Letztes Jahr war ich zufällig bei einer Kakao-Präsentation vor Ort und hatte nur vage den Gedanken, dass ich so etwas irgendwann auch einmal bauen sollte.

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

Kürzlich hat Baemin ebenfalls etwas Ähnliches entwickelt, also dachte ich mir: Jetzt probiere ich es auch einmal aus – und habe es entwickelt.

Wenn Sie es tatsächlich verwenden und Logs ansehen möchten, können Sie entweder die im Repository enthaltene Inspector-Seite bauen und deployen oder – falls Sie keinen WebSocket-Server nutzen und nur die Logs prüfen möchten – den Playground verwenden.

Starten Sie außerdem den bereitgestellten Webserver und fügen Sie auf Client-Seite den [Client]-Code(https://www.npmjs.com/package/@ohah/chrome-remote-devtools-client) wie folgt ein:

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

Ich habe auch bereits eine Tauri-Konfiguration vorbereitet, um es als Desktop-App zu verteilen, bisher aber noch nichts veröffentlicht.

Sie können sich entweder in Echtzeit über den WebSocket-Server verbinden oder, wenn Ihnen ein Nutzer Logs übergibt, diese Logdateien über die Chrome-DevTools-UI ansehen.

Da sich bestimmte Bereiche wie Speicher- oder Performance-Messungen aufgrund der Eigenschaften von Remote-DevTools nur schwer unterstützen lassen, habe ich diese ausgeschlossen. Verfügbar sind einfache Prüfungen für Elements, Console, Network, LocalStorage, SessionStorage und Cookies.

Außerdem habe ich die rr-web-Funktion als Tab innerhalb des Chrome-DevTools-Debuggers integriert, sodass sich die Bildschirmaktionen des Nutzers direkt in den Chrome DevTools ansehen lassen.

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

Einfache Abläufe und Funktionen können Sie über den obigen Link ansehen.

Hinweis
Bitte keinesfalls auf Production-Level einsetzen.