chrome for android 開發人員遠端除錯

為了測試無密碼登入的功能,試寫了一個簡易的網頁,採用WebAuthn技術。

在桌機上的Chrome測試時,成功出現使用USB安全金鑰登入的畫面,可是我沒有金鑰,只好以手機來測試,也成功出現使用金鑰或指紋來登入的畫面。

但是我想用console.log來輸出一些object等訊息,但是桌機的Chrome因為無硬體金鑰,所以無法繼續,故也秀不出之後的console log;而用手機的Chrome是叫不出開發人員選項,所以也無秀不出console log。

之後找到一篇遠程調試 Android 設備的文章,可以利用桌機的Chrome來遠端對Android的Chrome進行除錯,故記錄我的步驟,方便使用。

手機Chrome版本:81、桌機Chrome版本:80

1、啟用紅米手機的開發人員模式,並將「USB調試」功能打開

2、將手機與桌機用USB線串在一起,並開啟手機的Chrome

3、開啟桌機Chrome的開發人員模式(F12),點選 Remote devices



4、在新增的頁籤「Remote devices」點選下圖紅色圈選處的連結,開啟新頁面



5、確定「Discover USB devices」有勾選;有成功連上手機就會出現下列圈選的機碼



6、offline代表未認證,打開手機(我的是紅米)畫面出現需要確認的畫面,確認它。

7、手機確認後就offline就會變成online,並且看見手機上Chrome



8、直接在手機上操作或在「Open tab with url」輸入url,如上圖我已開啟ngrok.io的測試網頁,按下「inspect」,就可以遠端對手機Chrome進行除錯。



利用Plink替代Putty來建立Script