Trình gỡ lỗi Chrome từ xa chrome-remote-devtools

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

Năm ngoái tôi tình cờ có dịp đến buổi thuyết trình của Kakao, khi đó chỉ mơ hồ nghĩ rằng một ngày nào đó mình cũng պետք է thử làm một thứ như vậy.

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

Gần đây thấy Baemin cũng phát triển một thứ tương tự, nên tôi nghĩ giờ mình cũng thử một lần..? và đã bắt tay vào phát triển.

Khi sử dụng thực tế, nếu muốn xem log thì bạn có thể build và triển khai trang inspector trong kho lưu trữ; hoặc nếu không dùng máy chủ WebSocket mà chỉ định kiểm tra bằng log, bạn cũng có thể xem trên playground.

Và sau khi chạy máy chủ web được cung cấp, ở phía client chỉ cần thêm mã client như dưới đây.

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

Tôi cũng đã cấu hình Tauri để có thể phát hành dưới dạng ứng dụng desktop, nhưng vẫn chưa phát hành.

Bạn có thể kết nối qua máy chủ WebSocket để theo dõi theo thời gian thực, hoặc khi người dùng chuyển log cho bạn thì có thể kiểm tra tệp log đó thông qua UI Chrome DevTools.

Do đặc thù của DevTools từ xa, tôi đã loại trừ các phần khó hỗ trợ như đo bộ nhớ hoặc hiệu năng, và hiện chỉ có thể kiểm tra những mục cơ bản như Elements, Console, Network, LocalStorage, SessionStorage và Cookie.

Tôi cũng đã đưa tính năng rrweb vào một tab bên trong trình gỡ lỗi Chrome DevTools để có thể xem các thao tác màn hình của người dùng ngay trong Chrome DevTools.

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

Bạn có thể xem cách hoạt động và các tính năng đơn giản tại liên kết ở trên.

Lưu ý
Tuyệt đối không sử dụng ở cấp độ production