web前端開發之移動端真機調試

---恢復內容開始---

前言

在前端開發中，調試是不可缺乏的環節，PC端很簡單，可是隨着移動端火起來，在手機上面測試就顯得尤其重要。

在工做中本人也通過了一些測試，總結了以下幾種方法。

 1.Weinre 調試

2.UC開發者瀏覽器:

3.chrome真機調試

4.Safari開發者工具

5.Browsersync

在這5種調試方法中我推薦第5種，有興趣的朋友能夠逐一瀏覽。

 1、使用 Weinre 調試

該方法是比較老的一種方法，對於其餘的調試方法來講屬於刀耕火種型的。weinre是一個調試包，自己提供一個JavaScript，須要你在項目文件中加入該js。首先安裝Weinre，咱們用nodejs安裝之，使用-g全局命令，能夠在各個目下訪問：

 npm install -g weinre

安裝weinre以後再設置監聽本機的ip:

 weinre --boundHost xxxxxxxxxxx

而後weinre會爲你分配一個監聽的ip，copy之而後將其在瀏覽器中打開,會看到以下界面:

將界面底部的js文件插入到你的項目文件中去，在你的項目文件引入:

  <script src="http:/閣下本身的ip:8080/target/target-script-min.js#anonymous"></script>

刷新你的項目，能夠在剛剛打開的界面，點擊第一行debug client user interface,進入上發現了一條新記錄，選中之。若是是多條記錄，你能夠選中其中一條，而後切換到其餘界面開始調試項目:

接下來就能夠愉快的開始真機調試了:

weinre工具優勢：

全部調試工具中惟一不以其餘第三方制定軟件爲依賴的方式，這種方式的好處就是跨平臺，其次是跨瀏覽器，若是你是在微信或者其餘phoneGap外殼方式上開發的，你就會知道，這個方式是比其餘方式更有用。

weinre缺點：

在本身項目中引入js文件，須要手動刪除，這對代碼的控制和版本的控制形成了必定影響。頗爲不便。可是最大的雞肋卻不是這個。weinre最大的雞肋是隻能調試樣式和元素，js沒法調試！！是的，因此它基本上是一隻腿走路的。

 

2、UC開發者瀏覽器:

感謝國內還有如此良心公司，爲移動開發者帶來的這款神器！UC瀏覽器在手機上佔有率國內來講仍是蠻高的。要開啓調試模式必須在手機上下載UC安卓版的開發版瀏覽器，也就是圖標帶一個小扳手的那個。而後在查看你的手機IP.若是是在WI-FI鏈接模式下在瀏覽器中輸入你的手機ip+:9998，（PC和手機必須在同一個網段！）手機上的瀏覽器上會提示你是否開啓調試模式，點擊確認，就進入開發面板了。過程十分簡單;(原諒露珠今天沒帶手機，圖都是盜的):下面是進入界面展現

上圖都是你在開發者瀏覽器中打開的界面，選擇一個進入開發模式吧！

UC手機開發工具的優勢：

簡單，容易上手。只要求一個UC開發者瀏覽器，其他的軟件不強制規定。不得不說國內的移動瀏覽器中UC走在了前面。

UC手機開發工具的缺點

依賴其餘軟件設備，開發者必須下載UC開發者工具。不跨平臺，無視了蘋果機。這種模式沒法調試微信或者其餘app內置瀏覽器。

 

4、Safari開發者工具：

露珠的手機是安卓系統（吊死機），pc是window系統（吊死機），因此沒法用這種方式調試iphone。可是隔壁老大用的都是蘋果產品，遇到iphone問題，也去那邊調試了一下，發現蘋果系列作的還真是蠻不錯的。第四種方式首先得硬件條件是iphone和mac。很遺憾，window版的safari沒法調試iphone。過程也是比較簡單：

啓用功能：

手機端：設置 → Safari → 高級 → Web 檢查器 → 開。

mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示「開發」菜單。

在 OS X 中啓動 Safari 以後，以 USB 電纜正常接入 iOS 設備，並在此移動設備上啓動 Safari。此時點擊計算機上的 Safari 菜單中的「開發」，能夠看到有 iOS 設備的名稱顯示，其子菜單項即爲移動設備上 Safari 的全部標籤頁，點擊任意一個開始調試。

蘋果系列優勢：

便捷，簡單，高端大氣上檔次，能夠調試外殼包裹的瀏覽器如微信。

蘋果系列缺點：

不用說，設備限嚴重依賴其公司產品，不給沒錢買它產品的人活路啊。

 

3、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內置瀏覽器。

 

5、Browsersync

特性

　　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