Uzak Chrome hata ayıklayıcı chrome-remote-devtools

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

Geçen yıl tesadüfen Kakao’nun sunum etkinliğine gitmiştim; bir gün benim de böyle bir şey yapmam gerekir diye belirsiz bir düşüncem vardı.

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

Yakın zamanda Baemin de benzer bir şey geliştirmişken, ben de artık bir deneyeyim diyerek bunu geliştirdim.

Gerçek kullanımda logları görmek için depodaki inspector sayfasını derleyip dağıtabilir ya da WebSocket sunucusunu kullanmadan yalnızca loglarla kontrol edecekseniz playground üzerinden de inceleyebilirsiniz.

Ayrıca sağlanan web sunucusunu çalıştırıp, istemci tarafına da
istemci kodunu aşağıdaki gibi eklemeniz yeterli.

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

Masaüstü uygulaması olarak dağıtmak için Tauri ayarlarını da yaptım, ancak henüz dağıtıma çıkmadı.

WebSocket sunucusu üzerinden bağlanıp gerçek zamanlı olarak inceleyebilir ya da kullanıcı size logları ilettiğinde ilgili log dosyasını Chrome DevTools arayüzü üzerinden kontrol edebilirsiniz.

Uzak DevTools’un doğası gereği desteklemesi zor olan bellek ve performans ölçümü bölümlerini hariç tuttum;
şimdilik basit düzeyde Elements, Console, Network, LocalStorage, SessionStorage ve Cookie kontrolü mümkün.

Ayrıca rr-web özelliğini Chrome DevTools hata ayıklayıcısının içindeki bir sekmeye ekleyerek, kullanıcının ekran üzerindeki aksiyonlarını Chrome DevTools içinde görebilmenizi sağladım.

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

Basit çalışma şekli ve özellikleri yukarıdaki bağlantıdan görebilirsiniz.

Dikkat
Bunu kesinlikle production seviyesinde kullanmayın