隨著手機(jī)等移動(dòng)設(shè)備的普及，適配移動(dòng)端的頁面變得越來越有必要。這也意味著移動(dòng)端的調(diào)試變得越來越頻繁，那么就會(huì)發(fā)生以下悲慘的故事。

在正式開始之前，我們要先學(xué)會(huì)怎么讓你的手機(jī)連上你的電腦，就是你在電腦瀏覽器里能訪問什么頁面，那么在你的手機(jī)上也可以訪問到。那我們就要使用到代理軟件fiddler。

Fiddler是一個(gè)http調(diào)試代理，它能夠記錄所有你電腦和互聯(lián)網(wǎng)之間的http通訊，F(xiàn)iddler可以也可以讓你檢查所有的http通訊，設(shè)置斷點(diǎn)，以及Fiddle 所有的“進(jìn)出”的數(shù)據(jù)（指cookie,html,js,css等文件，這些都可以讓你胡亂修改的意思，它還可以抓取進(jìn)程發(fā)送的HTTP報(bào)文）。 Fiddler 要比其他的網(wǎng)絡(luò)調(diào)試器要更加簡(jiǎn)單，因?yàn)樗鼉H僅暴露http通訊還有提供一個(gè)用戶友好的格式。

1、配置fiddler 允許遠(yuǎn)程連接

打開Fiddler, Tools-> Fiddler Options 。 （配置完后記得要重啟Fiddler）.

選中"Decrpt HTTPS traffic", Fiddler就可以截獲HTTPS請(qǐng)求

選中"Allow remote computers to connect". 是允許別的機(jī)器把HTTP/HTTPS請(qǐng)求發(fā)送到Fiddler上來

fiddler基本配置

2.png

然后獲取手機(jī)的ip 10.240.xxx.xx,手機(jī)連接電腦的wifi或者連接相同路由器的wifi，長(zhǎng)按wifi名稱，彈出（iphone手機(jī)設(shè)置會(huì)更簡(jiǎn)單，其他手機(jī)也類似）

3.png

4.png

選擇修改網(wǎng)絡(luò) --> 顯示高級(jí)選項(xiàng)--> 代理改為手動(dòng) -->輸入電腦IP 端口、密保-->保存

這樣就可以連接上電腦的代理了，手機(jī)就可以訪問電腦端能訪問的任何頁面了。而且在fiddler中，還能捕獲到手機(jī)發(fā)出的請(qǐng)求。然后就可以結(jié)合weinre來測(cè)試移動(dòng)端的頁面了，不管pc端是測(cè)試環(huán)境還是線上環(huán)境，手機(jī)端都可以測(cè)試了，而且還可以測(cè)試webView頁面。

那一年，你還是個(gè)孩子，pc頁面寫多了沒意思，聽說移動(dòng)端頁面挺流行的，你也想寫個(gè)出來玩玩，于是你寫啊寫啊。寫完了在chrome模擬器調(diào)試完了覺得不錯(cuò)，但是你想放到手機(jī)上去看看效果，然后你把html文件發(fā)送到了手機(jī)打開一看，亂得簡(jiǎn)直慘不忍睹。于是呢你在電腦上改一點(diǎn)就往手機(jī)上發(fā)一遍html文件，調(diào)的你都想吐了。于是聰明的你找了個(gè)方法：

apache 調(diào)試靜態(tài)頁面方法

安裝Apache服務(wù)器，一直下一步直到安裝完成。xampp 集成包下載鏈接

安裝完成之后運(yùn)行apache control panel 然后運(yùn)行apche、在瀏覽器輸入localhost:80,就可以看到apache主頁

修改Apache服務(wù)器的根目錄指向你的工程文件夾，點(diǎn)擊config按鈕、修改http.conf DocumentRoot "H:/workspace" 與<Directory "H:/workspace">，把路徑修改成你項(xiàng)目的目錄，然后重啟。再訪問localhost:80/ index.html就可以訪問到你workspace文件夾的index.html文件了

手機(jī)與電腦連在同一個(gè)路由器的wifi、或者手機(jī)連著電腦開啟的wifi。然后在手機(jī)的瀏覽器中輸入電腦ip地址 + 端口 + 訪問文件的目錄

然后你在瀏覽器上修改頁面，只需要在手機(jī)瀏覽器中刷新一下頁面，修改的代碼就生效了。

注意：apache 默認(rèn)端口是80，如果有沖突的話可以在apache/conf目錄下修改http.conf文件中修改listen 80,比如我修改為listen 8081，保 存重新運(yùn)行，瀏覽器中輸入locahost:8081,也可以訪問到

默認(rèn)情況下，apache可以訪問的文件是放在xampp/htdocs/目錄下的文件的，所以一般我們都會(huì)在此目錄下建立工程。在瀏覽器中輸入的locahost:8081對(duì)應(yīng)到的是xampp/htdocs/目錄，比如在htdocs目錄下建了一個(gè)mytest文件夾，并且文件夾里新建一個(gè)demo.html,當(dāng)我們需要訪問這個(gè)頁面的時(shí)候，只需要在瀏覽器中輸入localhost:8081/mytest/index.html 就ok了。

現(xiàn)在起一個(gè)靜態(tài)文件服務(wù)器越來越簡(jiǎn)單了，方法也有很多，這個(gè)方法比較適合學(xué)過php的人。現(xiàn)在學(xué)node的人也比較多，自己寫幾行代碼就可以起個(gè)服務(wù)器了

好了、現(xiàn)在你的問題解決了。

后來你進(jìn)了一家公司。有那么一天，產(chǎn)品經(jīng)理一拍腦子，提出了一個(gè)蛋疼的想法，想做一個(gè)移動(dòng)端頁面。找你唧唧歪歪一陣子之后，你也覺得做就做吧，不就是個(gè)移動(dòng)端頁面嘛。于是蛋開始疼了然后你切圖、寫html、css、javascript 一氣呵成。使用chrome模擬調(diào)試順順利利，搞定收工、發(fā)布到測(cè)試環(huán)境。然后把鏈接扔給了產(chǎn)品經(jīng)理，自己翹著二郎腿喝咖啡去了。當(dāng)你咖啡還沒喝完。產(chǎn)品經(jīng)理跑過來跟你說、你寫的頁面有問題啊，你這個(gè)按鈕怎么點(diǎn)不了啊。你喝著咖啡慢悠悠著說，你手機(jī)有問題吧，然后產(chǎn)品經(jīng)理說，xxx的手機(jī)也是這樣啊。這時(shí)候你不淡定了說，不可能吧，那我看看吧。然后你打開電腦、拿出手機(jī)、連上usb數(shù)據(jù)線、方法如下：

調(diào)試準(zhǔn)備：

window7系統(tǒng)安裝chrome

安卓手機(jī)安裝chrome for Android

usb數(shù)據(jù)線

步驟

USB設(shè)置 在你的手機(jī)里打開"設(shè)置"->"開發(fā)人員工具"->"USB調(diào)試" 打開USB調(diào)試。

假設(shè)你已經(jīng)將手機(jī)設(shè)置為"USB調(diào)試"打開的狀態(tài) 將手機(jī)連接到電腦 手機(jī)會(huì)彈出是否鏈接 點(diǎn)擊確定

打開電腦的chrome 在地址欄輸入?chrome://inspect?選中 Discover USB devices 可以檢測(cè)到你的設(shè)備

安卓chrome調(diào)試安卓

在手機(jī)chrome瀏覽器中輸入所要打開的網(wǎng)頁鏈接，也可以在瀏覽器 中輸入url，點(diǎn)擊open就可以在手機(jī)端打開

點(diǎn)擊inspect ，就會(huì)顯示chrome控制臺(tái)，就可以正常的在chrome調(diào)試手機(jī)頁面了

檢查控制臺(tái)發(fā)現(xiàn)、的確是js腳本報(bào)錯(cuò)了、是因?yàn)槟硞€(gè)方法使用由兼容性問題。于是你改完又扔給產(chǎn)品經(jīng)理了，可是沒過幾分鐘，產(chǎn)品經(jīng)理又跑過來了，說這個(gè)頁面顯示的有問題啊，你看這個(gè)圖片不居中了啊。我靠剛才不是好好的嘛， 產(chǎn)品經(jīng)理說，我現(xiàn)在用的是uc瀏覽器，然后你。。。。。。。哦、我看看。

這個(gè)時(shí)候，你終于要爆發(fā)了，拿出你的終極大招 weinre，方法如下：

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的遠(yuǎn)程調(diào)試工具，借助于網(wǎng)絡(luò)，可以在PC上直接調(diào)試運(yùn)行在移動(dòng)設(shè)備上的遠(yuǎn)程頁面，中文意思是遠(yuǎn)程Web檢查器，有了Weinre，在PC上可以即時(shí)修改目標(biāo)網(wǎng)頁的HTML/CSS/Javascript，調(diào)試過程可實(shí)時(shí)顯示移動(dòng)設(shè)備上頁面的預(yù)覽效果，并同步顯示設(shè)備頁面的錯(cuò)誤和警告信息，可以查看網(wǎng)絡(luò)資源的信息，不過weinre不支持?jǐn)帱c(diǎn)調(diào)試。該項(xiàng)目目前是 Apache Cordova 的一部分。

weinre工作原理

7.png

上述三層結(jié)構(gòu)示意圖的含義：

Debug客戶端（client）：本地的WebInspector，遠(yuǎn)程調(diào)試客戶端。

Debug服務(wù)端（agent）：本地的HTTPServer，為Debug目標(biāo)頁面與Debug客戶端建立通信。

Debug目標(biāo)頁面（target）：被調(diào)試的頁面，頁面已嵌入weinre的遠(yuǎn)程js。

客戶端、目標(biāo)頁面與Debug服務(wù)端之間使用XMLHttpRequest (XHR)進(jìn)行HTTP通信，你通常的使用情形是將Debug客戶端與服務(wù)端搭建在桌面開發(fā)環(huán)境，Debug目標(biāo)頁面放在移動(dòng)設(shè)備。

由于Weinre的debug客戶端是基于Web Inspector開發(fā)，而Web Inspector只兼容WebKit核心的瀏覽器，所以只能在Chrome/Safari瀏覽器打開Weinre客戶端進(jìn)行調(diào)試。

3、安裝weinre

Weinre支持Windows與Mac（Weinre是運(yùn)行在java環(huán)境下的，請(qǐng)確保機(jī)器上有正確的java運(yùn)行環(huán)境），以前Weinre是用安裝包安裝的方式，現(xiàn)在Weinre 也發(fā)布到 NPM 上了。

首先安裝 Weinre：

npm install -g weinre

安裝完成之后，在本地開啟一個(gè)監(jiān)聽服務(wù)器，獲取本機(jī)的局域網(wǎng)地址：your-pc-ip，這時(shí)候執(zhí)行如下命令開啟：

weinre --httpPort 8910 --boundHost -all-（your-pc-ip）

說明：weinre默認(rèn)使用8080端口，服務(wù)器主機(jī)名默認(rèn)使用localhost，需要修改可在上述命令中進(jìn)行設(shè)置，比如可以綁定為開發(fā)機(jī)器的內(nèi)網(wǎng)IP地址。為了能在本地使用localhost打開，又能在移動(dòng)設(shè)備或本地環(huán)境用IP地址打開Weinre調(diào)試工具，我們需要設(shè)置boundHost為"-all-"，同時(shí)要確保調(diào)試頁面所在設(shè)備與當(dāng)前開發(fā)環(huán)境（包括Debug客戶端和Debug服務(wù)端）都處于同一網(wǎng)段內(nèi)。Weinre綁定端口一定不能與本地環(huán)境已監(jiān)聽的端口沖突，確保綁定的是閑置端口，例如我設(shè)置的是8910。

Weinre還提供了下面的啟動(dòng)參數(shù):

--help : 顯示W(wǎng)einre的Help

--httpPort [portNumber] : 設(shè)置Weinre使用的端口號(hào)， 默認(rèn)是8080

--boundHost [hostname| ip address | -all-] : 默認(rèn)是'localhost'， 這個(gè)參數(shù)是為了限制可以訪問Weinre Server的設(shè)備， 設(shè)置為-all-或者指定ip， 那么任何設(shè)備都可以訪問Weinre Server。

--verbose [true | false] : 如果想看到更多的關(guān)于Weinre運(yùn)行情況的輸出， 那么可以設(shè)置這個(gè)選項(xiàng)為true， 默認(rèn)為false；

--debug [true | false] : 這個(gè)選項(xiàng)與--verbose類似， 會(huì)輸出更多的信息。默認(rèn)為false。

--readTimeout [seconds] : Server發(fā)送信息到Target/Client的超時(shí)時(shí)間， 默認(rèn)為5s。

--deathTimeout [seconds] : 默認(rèn)為3倍的readTimeout， 如果頁面超過這個(gè)時(shí)間都沒有任何響應(yīng)， 那么就會(huì)斷開連接。

4、在瀏覽器中輸入http:your-pc-ip:8910/

![Uploading 8_910698.png . . .]

把復(fù)制到你需要調(diào)試的頁面，然后在瀏覽器打開頁面。點(diǎn)擊

進(jìn)入到調(diào)試頁面，點(diǎn)擊頁面鏈接，變綠色，表示調(diào)試此頁面

9.png

然而在本地是可以打開調(diào)試的，但是我們的目的是通過手機(jī)端來調(diào)試，那么我們就得把需要調(diào)試的頁面發(fā)布到線上，然后在手機(jī)瀏覽器上打開頁面，

發(fā)現(xiàn)這樣是可以調(diào)試的，但是如果我們需要在本地或者測(cè)試環(huán)境調(diào)試，那就不行了，所以我們需要手機(jī)能訪問我們電腦連接的測(cè)試環(huán)境，那就需要代理軟件了。

總結(jié)：

選擇哪種調(diào)試方式根據(jù)實(shí)際開發(fā)需求來選擇，如果只是調(diào)試頁面的適配各個(gè)手機(jī)，各種瀏覽器的話，那么可以使用第一種，

如果只是要調(diào)試腳本的話，那么可以使用第二種

對(duì)于第三種的weinre，是比較強(qiáng)大的，但是步驟也相對(duì)繁瑣點(diǎn)，但是功能可以包含以上兩種。

如果以上的方法還不能滿足你，這里有更多的更詳細(xì)的調(diào)試方式

作者：木白no1

鏈接：http://www.lxweimin.com/p/5b025d2842f2

來源：簡(jiǎn)書