Debugger Chrome jarak jauh chrome-remote-devtools

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

Tahun lalu saya kebetulan pernah datang ke lokasi presentasi Kakao, dan sejak itu saya hanya punya bayangan samar bahwa suatu hari nanti saya juga harus membuat yang seperti ini.

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

Belakangan ini saya melihat Baemin juga mengembangkan sesuatu yang serupa, jadi saya berpikir, sekarang giliran saya untuk mencobanya... lalu saya pun membuatnya.

Saat benar-benar digunakan, untuk melihat log Anda bisa membangun lalu mendistribusikan halaman inspector yang ada di repositori, atau jika tidak menggunakan server WebSocket dan hanya ingin memeriksa log saja, Anda juga bisa melihatnya di playground.

Lalu jalankan web server yang disediakan, dan pada sisi klien masukkan kode client seperti di bawah ini.

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

Saya juga sudah menyiapkan konfigurasi Tauri untuk didistribusikan sebagai aplikasi desktop, tetapi belum dirilis.

Anda bisa terhubung melalui server WebSocket untuk memeriksanya secara real-time, atau jika pengguna memberikan log, Anda bisa memeriksa file log tersebut melalui UI Chrome DevTools.

Karena sifat remote DevTools, bagian seperti pengukuran memori atau performa yang sulit didukung tidak disertakan,
dan yang bisa diperiksa kurang lebih adalah Elements, Console, Network, LocalStorage, SessionStorage, dan Cookie.

Fitur rr-web dimasukkan ke dalam tab di debugger Chrome DevTools sehingga aksi layar pengguna bisa dilihat dari dalam Chrome DevTools.

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

Cara kerja sederhana dan fiturnya bisa Anda lihat di tautan di atas.

Perhatian
Jangan pernah gunakan di level production