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

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

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

好久好久之前，個人作法是：在PC上用Chrome移動模擬器調試好後，基本OK，再把相關文件傳到手機上，在真機上測試以防特殊問題出現。

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

如今，個人作法是：用PC端的Chrome與手機端的Chrome鏈接，經過一條數據線，進行遠程的真機調試。

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

 

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

 

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

2、手機的開發者選項打開，其中的USB調試打開

 

 

3、經過數據線鏈接PC，個人是Win7 X64系統，蘋果MAC的應該也能夠，這一步是裝好手機的驅動

Win7默認鏈接的時候會自動安裝相應驅動程序，若是安裝不成功，能夠用第三方的手機助手，它們也會幫你安裝，或者本身手動安裝

好比小米5自動安裝驅動成功了，但ADB Interface卻出現了問題，在設備管理器那裏能夠看到感嘆號，因此手動安裝：

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

下載成功後，把壓縮包解壓出來，如/Driver 的目錄形式，手動安裝，打開設備管理器，若是驅動以及OK了就能夠忽略下一步了

若是ADB Interface處有感嘆號，就右鍵更新驅動程序，按步驟進行

個人驅動是已經OK了因此出現上圖

驅動有問題的話，就選擇從磁盤安裝，選擇/Driver 目錄下的相應inf文件，進行安裝就能夠了

最後，長成這樣就OK了

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

 

4、肯定PC端Chrome與移動端Chrome的鏈接，進行調試

PC端打開 chrome://inspect/#devices ，能夠看到，沒有發現設備

 

數據線鏈接手機，（選擇容許設備調試）看到設備

這樣就能夠PC端和移動端同步了，好比輸入框中輸入url進行跳轉

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

1 位置能夠自定義連接更新

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

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

5 位置中能夠作相應設置

 

5、端口轉發功能，實現本地/服務器相關頁面的調試

上面說到的調試只是基本的功能，只能調試服務器（特定連接）上的頁面，若是要調試本地的頁面文件呢？

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

解決辦法是配置一個本地服務器，而後經過端口轉發（Port Forwarding）這個功能，實現相關頁面的調試

相似這樣配置好可用於端口轉發的端口

或者從這裏進入配置

配置本地服務器的端口（我使用到了wampserver ,用了Apache的服務器

Apache設置好端口爲8080以後，PC端訪問成功，同步到手機，手機端也訪問成功，接下來就能夠進行調試了