ดีบักเกอร์ Chrome ระยะไกล chrome-remote-devtools

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

ปีที่แล้วผมบังเอิญได้ไปงานบรรยายของ Kakao อยู่ครั้งหนึ่ง ตอนนั้นก็แค่คิดลอย ๆ ว่าสักวันหนึ่งฉันก็น่าจะลองทำบ้าง

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

แล้วช่วงหลังเห็นว่าทาง Baemin ก็พัฒนาสิ่งที่คล้ายกันขึ้นมา ผมเลยคิดว่า งั้นตอนนี้ลองทำดูสักครั้งดีไหม..? แล้วก็ลงมือพัฒนาขึ้นมาครับ

เวลานำไปใช้งานจริง หากต้องการดูล็อก คุณสามารถ build และ deploy หน้า inspector ที่อยู่ใน repository ได้ หรือถ้าไม่ได้ใช้เว็บซ็อกเก็ตเซิร์ฟเวอร์และต้องการดูผ่านล็อกอย่างเดียว ก็สามารถดูได้ใน Playground

และให้รัน เว็บเซิร์ฟเวอร์ ที่มีให้ จากนั้นฝั่งไคลเอนต์ให้นำโค้ด ไคลเอนต์ ด้านล่างไปใส่ดังนี้

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

มีการตั้งค่า Tauri ไว้แล้วสำหรับการแจกจ่ายเป็นเดสก์ท็อปแอป แต่ยังไม่ได้ปล่อยแจกจ่ายจริง

คุณสามารถเชื่อมต่อผ่านเว็บซ็อกเก็ตเซิร์ฟเวอร์เพื่อตรวจสอบแบบเรียลไทม์ หรือหากผู้ใช้ส่งล็อกมาให้ ก็สามารถเปิดดูไฟล์ล็อกนั้นผ่าน UI ของ Chrome DevTools ได้

ด้วยข้อจำกัดของรีโมต DevTools จึงตัดส่วนการวัดหน่วยความจำหรือประสิทธิภาพที่รองรับได้ยากออกไป
สามารถตรวจสอบได้ประมาณ Elements, Console, Network, LocalStorage, SessionStorage และ Cookie แบบพื้นฐาน

และได้นำฟีเจอร์ rr-web ไปใส่ไว้ในแท็บภายในดีบักเกอร์ Chrome DevTools เพื่อให้สามารถดูแอ็กชันบนหน้าจอของผู้ใช้ได้จากภายใน Chrome DevTools

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

สามารถดูการทำงานและฟีเจอร์แบบคร่าว ๆ ได้จากลิงก์ด้านบน

ข้อควรระวัง
ห้ามใช้ในระดับโปรดักชันโดยเด็ดขาด