Depurador remoto do Chrome chrome-remote-devtools

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

No ano passado, por acaso fui a um evento de apresentação da Kakao e fiquei com a ideia vaga de que algum dia eu também deveria fazer algo assim.

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

Recentemente, como o Baemin também desenvolveu algo semelhante, pensei “agora vai...?” e acabei desenvolvendo também.

Para uso real, se você quiser ver os logs, pode compilar e publicar a página do inspector que está no repositório ou, se não for usar um servidor WebSocket e quiser conferir apenas pelos logs, também pode verificar no playground.

E, depois de executar o servidor web fornecido, no lado do cliente basta inserir o código do cliente da seguinte forma:

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

Também deixei pronta a configuração do Tauri para distribuir como aplicativo desktop, mas ainda não fiz o lançamento.

Você pode se conectar em tempo real por meio de um servidor WebSocket ou, se o usuário lhe enviar os logs, pode verificar esse arquivo de log pela interface do Chrome DevTools.

Por se tratar de DevTools remoto, deixei de fora as partes de memória e medição de desempenho, que são difíceis de oferecer suporte, e é possível verificar de forma simples Elements, Console, Network, LocalStorage, SessionStorage e Cookies.

Também coloquei a funcionalidade do rr-web em uma aba dentro do depurador do Chrome DevTools, para que seja possível ver as ações da tela do usuário dentro do próprio Chrome DevTools.

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

Você pode conferir o funcionamento e os recursos básicos no link acima.

Cuidados
Nunca use em nível de produção