---恢復內容開始---
前言
在前端開發中，調試是不可缺少的環節，PC端很簡單，但是隨着移動端火起來，在手機上面測試就顯得尤為重要。
在工作中本人也經過了一些測試，總結了如下幾種方法。
1.Weinre 調試
2.UC開發者瀏覽器:
3.chrome真機調試
4.Safari開發者工具
在這5種調試方法中我推薦第5種，有興趣的朋友可以逐一瀏覽。
一、使用 Weinre 調試
該方法是比較老的一種方法，對於其他的調試方法來說屬於刀耕火種型的。weinre是一個調試包，本身提供一個JavaScript，需要你在項目文件中加入該js。首先安裝Weinre，我們用nodejs安裝之，使用-g全局命令，可以在各個目下訪問：
安裝weinre之后再設置監聽本機的ip:
然后weinre會為你分配一個監聽的ip，copy之然后將其在瀏覽器中打開,會看到如下界面:
將界面底部的js文件插入到你的項目文件中去，在你的項目文件引入:
刷新你的項目，可以在剛剛打開的界面，點擊第一行debug client user interface,進入上發現了一條新記錄，選中之。如果是多條記錄，你可以選中其中一條，然后切換到其他界面開始調試項目:
接下來就可以愉快的開始真機調試了:
weinre工具優點：
所有調試工具中唯一不以其他第三方制定軟件為依賴的方式，這種方式的好處就是跨平台，其次是跨瀏覽器，如果你是在微信或者其他phoneGap外殼方式上開發的，你就會知道，這個方式是比其他方式更有用。
weinre缺點：
在自己項目中引入js文件，需要手動刪除，這對代碼的控制和版本的控制造成了一定影響。頗為不便。但是最大的雞肋卻不是這個。weinre最大的雞肋是只能調試樣式和元素，js無法調試！！是的，所以它基本上是一只腿走路的。
二、UC開發者瀏覽器:
感謝國內還有如此良心公司，為移動開發者帶來的這款神器！UC瀏覽器在手機上占有率國內來說還是蠻高的。要開啟調試模式必須在手機上下載UC安卓版的開發版瀏覽器，也就是圖標帶一個小扳手的那個。然后在查看你的手機IP.如果是在WI-FI連接模式下在瀏覽器中輸入你的手機ip+:9998，（PC和手機必須在同一個網段！）手機上的瀏覽器上會提示你是否開啟調試模式，點擊確認，就進入開發面板了。過程十分簡單;(原諒露珠今天沒帶手機，圖都是盜的):下面是進入界面展示
上圖都是你在開發者瀏覽器中打開的界面，選擇一個進入開發模式吧！
UC手機開發工具的優點：
簡單，容易上手。只要求一個UC開發者瀏覽器，其余的軟件不強制規定。不得不說國內的移動瀏覽器中UC走在了前面。
UC手機開發工具的缺點
依賴其他軟件設備，開發者必須下載UC開發者工具。不跨平台，無視了蘋果機。這種模式無法調試微信或者其他app內置瀏覽器。
四、Safari開發者工具：
露珠的手機是安卓系統（吊死機），pc是window系統（吊死機），所以無法用這種方式調試iphone。但是隔壁老大用的都是蘋果產品，遇到iphone問題，也去那邊調試了一下，發現蘋果系列做的還真是蠻不錯的。第四種方式首先得硬件條件是iphone和mac。很遺憾，window版的safari無法調試iphone。過程也是比較簡單：
啟用功能：
手機端：設置 → Safari → 高級 → Web 檢查器 → 開。
mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示“開發”菜單。
在 OS X 中啟動 Safari 之后，以 USB 電纜正常接入 iOS 設備，並在此移動設備上啟動 Safari。此時點擊計算機上的 Safari 菜單中的“開發”，可以看到有 iOS 設備的名稱顯示，其子菜單項即為移動設備上 Safari 的所有標簽頁，點擊任意一個開始調試。
蘋果系列優點：
便捷，簡單，高端大氣上檔次，可以調試外殼包裹的瀏覽器如微信。
蘋果系列缺點：
不用說，設備限嚴重依賴其公司產品，不給沒錢買它產品的人活路啊。
三、chrome真機調試
chrome調試其實跟UC差不多，步驟也比較簡單，不同的是UC可以在wifi下調試，chrome不行，而且必須有硬件的接觸。首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，然后將數據線將兩台設備連接起來。在PC機上打開chorme，輸入chrome://inspect,
於是你就可以看到自己的設備和打開的網頁了,請再次原來露珠今天沒帶手機，給一張空圖:
設備網址下出現inspect、reload、close 等選項，點擊inspect會彈出一個窗口，閣下就可以在窗口中愉快地去調試了。
Chrome手機調試工具優點：
在熟悉的開發模式下調試，操作比較簡單。個人覺得UC在這方面勝過chrome。可以跨平台，在ios上也可以用。
Chrome手機調試工具缺點：
有目共睹，比起UC來，它步驟比較繁瑣，不能wifi調試，必須指定手機和PC瀏覽器的類型（都是chrome），這種模式無法調試微信或者其他app內置瀏覽器。
特性
BrowserSync能讓PC、各移動設備上的頁面同時實時地響應文件的更改，而不用刷新操作。而且，當在其他一個設備上進行點擊等行為時，該行為也會同步到其他瀏覽器中
安裝
BrowserSync是基於Node.js的，是一個Node模塊，所以需要先安裝nodejs
【nodejs安裝】
雖然nodejs官網提供了node的msi文件，但本人在window7系統下多次嘗試，均無法安裝成功，且會有your system has not been modified...的提示。最終本人使用了另一種方法成功安裝了nodejs
【1】下載node.exe
【2】下載最新版本的npm zip格式壓縮包
【3】在硬盤某個位置，如D盤下建立一個文件nodejs，把上面兩個下載的東西都放在這里，npm要解壓
【4】配置兩個環境變量：一個是PATH上增加node.exe的目錄D:\nodejs，一個是增加環境變量NODE_PATH，值為D:\nodejs\node_modules
 |
 |
【5】安裝express：打開cmd命令行(在nodejs目錄下，先按住shift按鍵，再點擊右鍵，出現"在此處打開命令窗口"選項並點擊)，使用命令行定位到這Node目錄下，鍵入指令npm install express
【6】安裝完成后，在命令行里面輸入node -v如果輸出nodejs的版本則安裝成功
設置
nodejs安裝完成后，需要對BrowserSync進行些簡單設置，包括安裝與監聽
【1】BrowserSync安裝
打開一個終端窗口，運行以下命令：
npm install -g browser-sync
當然用cnpm下載可能更快
【2】BrowserSync監聽
命令打開這個文件后輸入這行代碼監聽
browser-sync start --server --files "css/*.css, *.html"
files 路徑是相對於運行該命令的項目（目錄）。如果需要監聽多個類型的文件，需要用逗號隔開
電腦調試地址
Local: http://localhost:3000
手機調試地址
http://192.168.2.197:3000
若使用移動端則首先先保證移動端設備和桌面端設備處於同一局域網(一般地，都連入一個路由器即可)。而且，移動端無法訪問localhost，需要查找電腦的內網ip。通過在命令行中輸入ipconfig，查看ip地址為192.168.2.197。所以手機端訪問的地址為http://192.168.2.197:3000