リモート Chrome デバッガー chrome-remote-devtools

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

去年、たまたまカカオの発表会場に行く機会があって、いつか自分でも作ってみたいと漠然と思っていたのですが、

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

最近、Baemin でも似たようなものを開発していたので、じゃあ自分もそろそろ一度……ということで開発してみました。

実際に使う際にログを確認するには、リポジトリ内の inspector ページをビルドしてデプロイするか、WebSocket サーバーを使わずにログだけ確認するのであれば、プレイグラウンド でも確認できます。

そして、提供されている Web サーバー を実行し、クライアント側には
クライアント のコードを以下のように入れていただければ大丈夫です。

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

デスクトップアプリとして配布するために Tauri の設定もしてありますが、まだ配布はしていません。

WebSocket サーバー経由で接続してリアルタイムに確認したり、ユーザーがログを渡してくれれば、そのログファイルを Chrome DevTools UI から確認できます。

リモート DevTools の特性上、対応が難しいメモリやパフォーマンス計測の部分は除外しており、
簡単な Elements、Console、Network、LocalStorage、SessionStorage、Cookie 程度は確認可能です。

また、rr-web 機能を Chrome DevTools デバッガー内のタブに組み込み、ユーザー画面でのアクションを Chrome DevTools 内で見られるようにしました。

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

簡単な動作や機能は上のリンクから確認できます。

注意事項
本番環境レベルでは絶対に使用しないでください