移動端開發調試的幾種方式，各有優缺點
一、Chrome DevTools模擬手機調試
方法：F12打開開發者工具，點擊Toggle device toolbar按鈕模擬手機模式
優點：相對比較普遍的一種方法，結構、樣式、斷點調試等都不在話下。
缺點：只能通過pc瀏覽器調試，運行環境等達不到真機環境的條件，會造成某些屬性、樣式調試無問題，真機時不兼容問題。
二、Chrome瀏覽器自帶的Inspect檢查器
方法：地址欄輸入chrome://inspect/#devices
優點：最新版本，ios和android都支持，與手機頁面同步調試，可以同時調試多個設備和頁面，並且滿足絕大部分調試。
缺點：Android4.4以下不支持，必須通過數據線連接，android需要手機打開usb調試模式，對X5內核支持不是很好，時靈時不靈，ios需要額外配置可參考kelsen的博客。
另外個人理解Inspect算是一個擴展插件，需要下載（默認會自動下載）如果日常開發有網絡訪問限制的話，此方式不通。
三、插件調試
VConsole
方法：一般可cdn引入或使用npm安裝，詳情可查看官網
優點：官方的話說，輕量、可拓展、針對手機網頁的前端開發者調試面板。
缺點：調試功能有限，相對調試不方便，不能查看樣式，不能斷點調試，生產環境無法調試，開發環境會增加額外代碼量
weinre
方法：比較老的調試方式，可查看官網
優點：純JS，不需要數據線連接，不受網絡訪問限制，多個調試器客戶端可以同時調試同一個目標。
缺點：需要本地另起服務，只能運行在基於WebKit的瀏覽器，不可以斷點調試。
Eruda
與VConsole相似，未曾嘗試，可查看官網
四、使用HBuilderX編輯器Webview調試（個人推薦）
方法：官網下載最新版HBuilderX(簡稱HX)編輯器。
運行編輯器 --> 運行 --> 運行到手機或模擬器 --> 顯示Webview調試控制檯
優點：真機運行，邊改邊看，對中文使用者友好，不受網絡限制，不需要額外配置，見官網
缺點：需要數據線連接，ios不支持，android4.4以下版本和X5內核不支持，並且低端機兼容也不是很好，如果不喜歡用HX編輯器，而使用其他編輯器，對於電腦內存小於8G的同學，開發時會佔用額外運行內存，不過其他方式也會佔用內存，僅此。
多說一點HX的好處：HBuilder本身內置HTML5+ APP開發環境，提供一套完整的移動應用開發解決方案，名副其實的前端編輯器。懶人利器。
五、騰訊出品的TBS Studio
方法：官網查看下載安裝軟件
優點：可以調試X5內核、微信小程序、手機網站等多個頁面，自動檢測連接，一鍵啓動。
缺點：非X5內核需要下載驅動，意外出錯情況比較多，ios不支持。
TBS Studio調試文檔