移動端手機除錯的方法
移動端除錯困難
很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行除錯，沒有問題後，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏視覺化的介面。不似在PC端，我們能直觀的去改變樣式，或者是進行斷點除錯。有時，在移動端我們不得不借助於alert來除錯，但是這樣的除錯方法效率極其低下，很多時候，都是靠經驗，或者是靠排除法。甚至，我們不得不歸結為是瀏覽器的實現問題。
解決策略
這裡主要介紹三種方法
（1）chrome真機除錯
（2）X5 核心環境下，我們訪問
（3）蘋果手機解決方案
（4）利用vconsole進行除錯
1.開啟 Chrome 瀏覽器 Inspect 除錯
在 Chrome 瀏覽器位址列中輸入 chrome://inspect/#devices 並回車，就可以開啟 Inspect 除錯介面，此時我們勾選 Discover USB devices 選項便可以看到裝置列表。
然後開啟手機中開發者選項並開啟 USB 除錯開關（具體方法自行百度，不同手機有一定區別），使用資料線將手機連線到電腦上，我們就可以在裝置列表中看到自己的裝置。
這時，如果你手機上安裝了 Chrome 瀏覽器的話，隨便開啟一個網址（以掘金為例），裝置列表中你的裝置下便會出現你開啟的頁面。
此時我們點選 inspect 選項
看到這個熟悉的介面了嗎？接下來你便可以和除錯 PC 介面一樣通過 Chrome 進行你所需要的除錯，你在左側螢幕上做的一切操作和你的手機上的操作會始終保持同步，如果你嫌左邊這塊多餘，也可以關閉 Toggle Screencast 只保留控制檯本身。
點選左上角箭頭，然後手指點選手機螢幕你要選擇的區域，即可完成選取指定元素操作，其餘的操作都和在 PC 上完全一樣。
除了Chrome 瀏覽器，在手機的其他場景下怎麼除錯看效果呢。如微信，QQ，UC瀏覽器或者 App 內嵌，參考以下方法（只適用於安卓）：
2.微信、QQ、QQ瀏覽器等 X5 核心 Webview
X5 核心環境下，我們訪問 debugx5.qq.com/
在這個頁面中我們可以對 X5 核心進行配置（如非必要不建議改動配置），我們選擇資訊Tab並勾選“開啟TBS核心Inspector除錯功能”和“開啟TBS核心X5jscore Inspector除錯功能”兩個選項，完成後重啟頁面生效
然後 inspect 頁面就會自動重新整理列表，這時我們就能對微信及 QQ 等 X5 核心 Webview 進行除錯
3.蘋果手機解決方案：
極大限制：蘋果手機只能用蘋果手機中的Safari瀏覽器對蘋果電腦上的Safari瀏覽器進行除錯。
1.開啟手機端web檢查器，設定 -> Safari -> 高階（最底部） -> Web 檢查器 開啟
2.蘋果手機通過usb線連線上蘋果電腦，沒錯一定要蘋果電腦！
3.找到Mac電腦的Safari瀏覽器，找到開發者，就會顯示的手機的裝置;可參考
4.此時此刻就可以使用了，除錯各個App上網頁版的頁面了。
4.vconsole在手機端進行除錯；
1.下載
2.找到 dist/vconsole.min.js，在頁面中引入
<head>
<script src="dist/vconsole.min.js"></script>
</head>
<!--建議在 `<head>` 中引入哦~ -->
<script>
// 初始化
var vConsole = new VConsole();//這裡一定要初始化，不然頁面中沒有vConsole 的按鈕，打開不了控制檯
console.log('VConsole is cool');
</script>
出現vConsole按鈕，證明可以正常使用了
請注意，VConsole 只是 vConsole 的原型，而非一個已例項化的物件。所以在手動 new 例項化之前，vConsole 不會被插入到網頁中