रिमोट Chrome debugger chrome-remote-devtools

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

पिछले साल मैं संयोग से Kakao की एक प्रस्तुति में गया था, और तब से बस धुंधला-सा यह सोचता रहा कि कभी न कभी मुझे भी ऐसा कुछ बनाना चाहिए।

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

हाल ही में Baemin ने भी कुछ ऐसा ही विकसित किया, तो मैंने भी सोचा अब एक बार मैं भी इसे बनाकर देखूं... और फिर इसे विकसित कर लिया।

असल उपयोग में लॉग देखने के लिए आप repository में मौजूद inspector page को build करके deploy कर सकते हैं, या अगर आप websocket server का उपयोग किए बिना सिर्फ लॉग से ही जांच करना चाहते हैं, तो playground में भी देख सकते हैं।

और दिए गए web server को चलाने के बाद, client side में
client कोड को नीचे की तरह जोड़ दें।

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

desktop app के रूप में distribute करने के लिए Tauri settings भी तैयार कर रखी हैं, लेकिन अभी तक deploy नहीं किया है।

आप websocket server के जरिए connect करके real time में देख सकते हैं, या जब उपयोगकर्ता आपको लॉग दे, तो उस log file को Chrome DevTools UI के माध्यम से जांच सकते हैं।

remote devtools की प्रकृति के कारण memory या performance measurement जैसे मुश्किल हिस्सों को शामिल नहीं किया गया है,
और फिलहाल सिर्फ साधारण Elements, Console, Network, LocalStorage, SessionStorage, Cookie आदि की जांच की जा सकती है।

rr-web फीचर को Chrome DevTools debugger के अंदर एक tab में जोड़ा गया है, ताकि उपयोगकर्ता की screen actions को Chrome DevTools के भीतर ही देखा जा सके।

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

सरल कामकाज और फीचर्स ऊपर दिए गए लिंक में देखे जा सकते हैं।

ध्यान दें
इसे किसी भी हालत में production level पर उपयोग न करें