一年不見，博客園都長草啦...... 前幾日剛入手新手機小米5，系統真心流暢呀。為啥要買小米5呢，因為要提高生產力呀，好好玩移動前端開發呀哈哈哈 那麼問題來了，要怎麼調試手機上的前端頁面呢？ 很久很久以前，我的做法是：在PC上用Chrome移動模擬器調試好後，基本OK，再把相關文件傳到手機上，在真機 ...
一年不見，博客園都長草啦......
前幾日剛入手新手機小米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端訪問成功，同步到手機，手機端也訪問成功，接下來就可以進行調試了
