跳至主要内容

Remote another device's chrome Devtool by IP

本篇說明如何遠端操作或監控另一台裝置的 chrome devtool

問題描述​

在機器的面板上，我們用 Linux 啟動 Chrome page 作為機器面板的操作環境，並發現機器在長時間的工作中有機率發現面板卡住的情況。
機器的前後端溝通使用多個 WebSocket instances，卡住的點在 - 原本面板會不斷更新當前工作的進度，像是剩餘時間、已經完成多少 % ，以及跟 WebSocket 相關的 command 似乎沒有成功作用，但點擊的反應是有的。

原因​

原本猜測是某支 WebSocket 可能斷連，但經過 remote inspecting 後，發現是某個持續送到後端的 command 拿不到回應，一直 timeout（設定為 3000ms ），後端表示有可能是持續的 timeout 導致某個服務的記憶體被佔滿。
不過本篇不探討機器卡住的真正原因，而是要分享如何 remote inspecting。

解決方式​

本來在機器裡加入 Sentry 偵錯，但發現卡住後，Sentry 也沒有收到 WebSocket 的 Error。
因此，研究了如何用另一台電腦遠端同步機器的 chrome，並開啟 Devtool。

解決步驟​

  1. 機器啟動 chrome 的 config 新增
chrome.exe --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0

chrome.exe 為電腦裡啟動 chrome 的路徑，上面的 cmd 若無法開啟，可能需要加 sudo

  1. 電腦開啟 terminal
ssh -L 9222:localhost:9222 機器 IP 位置

這個 cmd 的意思是 ssh 進入後，把該 IP 的 9222 端口視為本機的 localhost:9222
這裡的 Port 必須對應步驟一的 Port

  1. 打開 chrome inspect 在 chrome url 輸入 chrome://inspect -> 點擊 Device 的 Configure -> 新增 localhost:9222
    稍微等一下，若有成功就會出現新的 Application Target 狀態，接著點擊其下方的 inspect 就可以開啟遠端 Chrome 的畫面，之後再開啟 Devtool 即可。
    chrome inspect

我們藉由這樣監測 Devtool 發現是上述提到的 cmd 一直 timeout。

備註

分享自己原本思路的錯誤：
原本遠端監控是先用自己電腦的 chrome Enter (機器的) IP url 直接看，但其實無效，因為從自己 chrome 進入的話，WebSocket 是自己瀏覽器的 connect，並非實際機器面板裡 running 的。

參考​

https://stackoverflow.com/questions/58999086/cypress-causing-type-errors-in-jest-assertions/72663546#72663546
https://www.youtube.com/watch?v=5t5XZKUgp9Y