擁有一款好用的移動端調試工具，在開發和調試 BUG 的過程中，都能快速提升開發效率和定位問題的能力。
前言#
在移動端 Web 開發的項目中，由於移動端設備的多樣性，IOS 系統的兼容性，不同安卓設備的 Webview 兼容性的不同，而 PC 端的瀏覽器開發者工具又很難複現問題，擁有一款好用的移動端調試工具，在開發和調試 BUG 的過程中，都能快速提升開發效率和定位問題的能力。
以下是我在開發過程中使用過的幾款調試工具。
vConsole#
vConsole 是由微信公眾平台前端團隊開源的一個輕量、可擴展、針對手機網頁的前端開發者調試面板，可用於展示 console 日誌，方便開發、調試。
Github: https://github.com/Tencent/vConsole
在線體驗地址：http://wechatfe.github.io/vconsole/demo.html
特性：
- 查看 console 日誌
- 查看網絡請求
- 查看頁面 element 結構
- 查看 Cookies、localStorage 和 SessionStorage
- 手動執行 JS 命令行
- 自定義插件
快速上手：
- Script 引入：
<head>
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
為了便於後續擴展，建議在 中引入：
- NPM
npm install vconsole
import vConsole from "vconsole";
const vConsole = new VConsole();
eruda#
Eruda 是一個專為手機網頁前端設計的調試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日誌、檢查元素狀態、捕獲 XHR 請求、顯示本地存儲和 Cookie 訊息等等。
Github:https://github.com/liriliri/eruda
在線體驗地址： https://eruda.liriliri.io/
特性：
-
按鈕拖拽，面板透明度大小設置。
-
Console 面板：捕獲 Console 日誌，支持 log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持佔位符，包括 % c 自定義樣式輸出；支持按日誌類型及正則表達式過濾；支持 JavaScript 腳本執行。
-
Elements 面板：查看標籤內容及屬性；查看應用在 Dom 上的樣式；支持頁面元素高亮；支持屏幕直接點擊選取；查看 Dom 上綁定的各類事件。
-
Network 面板：捕獲請求，查看發送數據、返回頭、返回內容等信息。
-
Resources 面板：查看並清除 localStorage、sessionStorage 及 cookie；查看頁面加載腳本及樣式文件；查看頁面加載圖片。
-
Sources 面板：查看頁面源碼；格式化 html，css，js 代碼及 json 數據。
-
Info 面板：輸出 URL 及 User Agent；支持自定義輸出內容。
-
Snippets 面板：頁面元素添加邊框；加時間戳刷新頁面；支持自定義代碼片段。
快速上手：
- 通過 CDN 使用：
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
- NPM
npm install eruda --save
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>
vconsole 和 eruda 功能類似，都是在移動端網頁內置一個 console 面板，但是，使用起來卻不是很方便，比如在調試某個元素的時候，由於手機端屏幕的局限性，操作起來並不方便，下面將介紹兩個最具代表性的遠程調試工具。
Weinre#
Weinre 代表Web Inspector Re mote，是一種遠程調試工具。
Weinre 作為一種遠程調試工具，在結構上分為三層：
- 目標頁面（target）：被調試的頁面，頁面已嵌入 weinre 的遠程 js；
- Debug 客戶端（client）：本地的 Web Inspector 調試客戶端；
- Debug 服務端（agent）：一個 HTTP Server，為目標頁面與 Debug 客戶端建立通信。
快速開始：
安裝：
npm install -g weinre
命令行啟動：
weinre --httpPort 8080 --boundHost -all-
打開谷歌瀏覽器（-webkit 內核）輸入：http://127.0.0.1:8080/
然後添加 Debug Target：
在你需要調試的頁面添加如下 script（ip）：
<script src="http://你的ip:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>
然後在手機端打開調試頁面，手機需要和電腦在同一 WIFI。
最後回到最開始打開的http://127.0.0.1:8080 ，點擊 “debug client user interface:” 如果沒有問題的話，就已經成功添加了 Debug Target。
注意：我目前還沒有使用過這個工具，詳細的使用指南請查看：https://github.com/nupthale/weinre
Chii#
Chii 是與 weinre 一樣的遠程調試工具，主要是將 web inspector 替換為最新的 chrome devtools frontend.
Github：https://github.com/liriliri/chii
Chii 和 Weinre 相比，調試界面變成了 Chrome 的開發者工具，更加友好。
快速開始：
安裝：
npm install chii -g
啟動：
chii start -p 8080
在你要調試的頁面注入以下腳本：
<script src="//你的ip:8080/target.js"></script>
然後就可以訪問 localhost:8080 開始調試頁面。
是不是很簡單，你可以在手機上進行操作，然後在 PC 端的調試面板中查看元素和 log 輸出。
總結#
以上就是移動端調試工具的相關分享，類似的工具還有很多，最出名的就是以上幾種吧，還有一些類似的工具如：
https://github.com/wuchangming/spy-debugger， 但是我還沒有用過，以後有更好用的再來分享。