由於最近工作中遇到需要在電腦上調試手機端的功能和樣式，之前也沒有遇到過，所以就各種百度和試驗。最后終於功夫不負有心人，成功了。（那一刻心情真滴很雞凍啊~~~~~~~~~）。所以暫時記錄下來。以免雞凍過度再給忘記了。
好，接下來就是具體的步驟啦。由於沒有什么筆墨經驗，所以都是大白話啦。😌
需必備的條件
- 手機端下載最新的chrome瀏覽器
- 電腦端下載最新的chrome瀏覽器
- 手機和電腦都可以翻牆（需要翻牆這是遇到坑后才知道的）。
- 數據線
開始操作
1.把手機的開發者選項打開，然后把允許通過USB調試的選項打開
有些手機的開發者選項是隱藏的。需要一定的操作才會出來。這個可以根據各自的手機型號去百度相應的方法。
下面以我華為mate10pro為例：
首先 設置->系統->關於手機->版本號 在版本號那一列連續敲七下 就可以啟動開發者模式（不用時最好關掉開發者模式）
打開開發者模式后 返回系統那個頁面可以看到 開發者選項 進入開發者選項 打開usb調試選項，如圖：
然后用數據線連接手機和電腦，這時手機會彈出一個提示框，點擊確認連接。
接下來 打開你PC端的chrome瀏覽器 在地址欄輸入：chrome://inspect/#devices
勾選上Discover USB devices這個選項 讓瀏覽器去發現鏈接的設備。
你的設備如果出現在這個頁面上了，就證明你連接成功了。否則就是沒有連接上。
然后，在手機上打開chrome瀏覽器，打開你想調試的頁面。
你所打開的頁面就會顯示在電腦上，如下圖：
如果想調試哪個頁面就可以點擊那個頁面下的 inspect ，就可以打開調試頁面了。
好，這時坑來了，如果你打開后是個空白。並沒有顯示出你的頁面。或者出現了個類似404提示。那是應該就是因為訪問chrome需要翻牆的原因。只要翻牆的問題解決了 就會出現正常的調試頁面啦。
看着是不是跟PC頁面調試沒有什么區別呀！😁（￣︶￣）↗
好了，接下來就可以進行你的調試之旅了。
目前自己只了解了這一種方式，如果還有其他更簡單靈活的方式，歡迎大家留言指導哦！