移動前端頁面與Chrome的遠程真機調試

標籤：

一年不見，部落格園都長草啦......

 

前幾日剛入手新手機小米5，系統真心流暢呀。為啥要買小米5呢，因為要提高生產力呀，好好玩移動前端開發呀哈哈哈

那麼問題來了，要怎麼調試手機上的前端頁面呢？

很久很久以前，我的做法是：在PC上用Chrome移動模擬器調試好後，基本OK，再把相關檔案傳到手機上，在真機上測試以防特殊問題出現。

這個主要有兩個缺點：一是傳來傳去的麻煩，資料量大的那就更麻煩了；二是只能顯示地看著頁面測試，不能做到真正的調試，測試出現問題了又得重新傳。

現在，我的做法是：用PC端的Chrome與手機端的Chrome串連，通過一條資料線，進行遠端真機調試。

這麼就改善了上述的缺點，雖然可能也會有其他不足的地方，但目前來說，應付一般的移動端調試，應該足夠了。

 

接下來，就通過小米5，詮釋這一調試方案的準備過程

 

一、PC端準備Chrome新版本、手機端準備移動Chrome新版本

二、手機的開發人員選項開啟，其中的USB調試開啟

 

 

三、通過資料線串連PC，我的是Win7 X64系統，蘋果MAC的應該也可以，這一步是裝好手機的驅動

Win7預設串連的時候會自動安裝相應驅動程式，如果安裝不成功，可以用第三方的手機小幫手，它們也會幫你安裝，或者自己手動安裝

比如小米5自動安裝驅動成功了，但ADB Interface卻出現了問題，在裝置管理員那裡可以看到驚嘆號，所以手動安裝：

訪問 小米官網 ，選擇相關下載，下載相應的驅動包，

下載成功後，把壓縮包解壓出來，如/Driver 的目錄形式，手動安裝，開啟裝置管理員，如果驅動以及OK了就可以忽略下一步了

如果ADB Interface處有驚嘆號，就右鍵更新驅動程式，按步驟進行

我的驅動是已經OK了所以出現

驅動有問題的話，就選擇從磁碟安裝，選擇/Driver 目錄下的相應inf檔案，進行安裝就可以了

最後，長成這樣就OK了

驅動安裝的步驟告一段落，蘋果MAC的原理也差不多，也得保證好驅動的支援。

 

四、確定PC端Chrome與移動端Chrome的串連，進行調試

PC端開啟 chrome://inspect/#devices ，可以看到，沒有發現裝置

 

資料線串連手機，（選擇允許裝置調試）看到裝置

這樣就可以PC端和移動端同步了，比如輸入框中輸入url進行跳轉

在移動端Chrome中就可以看到頁面得到了更新，選擇inspect選項，進行審查元素，可彈出調試視窗

1 位置可以自訂連結更新

2 位置是手機Chrome中頁面在PC中的映射，這樣以來可以直接在此映射上審查元素，如 3 所示

4 位置控制是否需要映射，如果取消選中，則取消映射，且可在手機上審查元素，

5 位置中可以做相應設定

 

五、連接埠轉寄功能，實現本地/伺服器相關頁面的調試

上面說到的調試只是基本的功能，只能調試伺服器（特定連結）上的頁面，如果要調試本地的分頁檔呢？

我寫了個本地的檔案，要調試，結果是拒絕訪問

解決辦法是配置一個本機伺服器，然後通過連接埠轉寄（Port Forwarding）這個功能，實現相關頁面的調試

類似這樣配置好可用於連接埠轉寄的連接埠

或者從這裡進入配置

配置本機伺服器的連接埠（我使用到了wampserver ,用了Apache的伺服器

Apache設定好連接埠為8080之後，PC端訪問成功，同步到手機，手機端也訪問成功，接下來就可以進行調試了

 

 

參考文章：Chrome Remote Debugging

移動前端頁面與Chrome的遠程真機調試