從移動端的 web 開發誕生至今，也相繼出現了很多除錯工具。每一種工具的出現，無一不在豐富開發手段和方便前端開發者。我們來簡單認識一下各式各樣的除錯工具。
模擬偵錯程式
在 pc 瀏覽器的偵錯程式中，模擬頁面在各種移動裝置上的表現。開發者在開發階段可以方便地在 pc 的瀏覽器上進行除錯，開發除錯效率很高，但缺點也是顯而易見的，畢竟只是模擬，有時候在模擬器上表現是正常的，實際到了真機上去看是有問題的。這類工具在主流的瀏覽器的偵錯程式中都有提供，尤其以 chrome 提供的最為強大。
真機偵錯程式
為了方便除錯移動頁面在真實裝置上的效果，android 和 ios 分別在各自的系統下提供了自己的遠**機除錯方案。對於 android 裝置，chrome devtools 提供了遠端除錯功能，通過 usb 資料線將裝置和電腦連線，android 裝置上開啟 usb 除錯模式，即可在 pc 端的 chrome 瀏覽器中實時除錯真機上的頁面。ios 裝置與 android 裝置類似，也是通過配置 ios 裝置和 safari 的除錯模式，在 pc 上遠端除錯 ios 裝置上的頁面。
跨平台 web 除錯**工
移動端除錯工具weinre
npm install g weinre 先全域性安裝，然後使用的時候通過如下命令啟動 10.2.54.11 是我的本機ip，埠可以自主設定，當然也可以不寫，預設8080。此時電腦端可以直接通過 訪問到weinre的主頁面，這個針對移動裝置除錯比較方便，當然對電腦端訪問的頁面也可以訪問，不過本身瀏覽...
eruda 移動端除錯工具的安裝使用
eruda 是乙個專為手機網頁前端設計的除錯面板，類似 devtools 的迷你版，其主要功能包括 捕獲 console 日誌 檢查元素狀態 顯示效能指標 捕獲xhr請求 顯示本地儲存和 cookie 資訊 瀏覽器特性檢測等等。具體說明可以去eruda檢視 eruda是為了方便移動端測試,我們通過u...
vConsole微信頁面 移動端除錯工具
這個神器，方便好用。於是在頁面js部分新增了以下 在出錯同事的手機上，結果 點選vconsole，結果 如果使用的是webpack，js中可以這麼使用vconsole 1.先安裝 npm install vconsole 2.js中引入 import vconsole from vconsole d...