隨著手機(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)試器要更加簡單轴脐，因?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，長按wifi名稱注益，彈出（iphone手機(jī)設(shè)置會(huì)更簡單碴巾，其他手機(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ī)打開一看圾亏，亂得簡直慘不忍睹。于是呢你在電腦上改一點(diǎn)就往手機(jī)上發(fā)一遍html文件封拧，調(diào)的你都想吐了志鹃。于是聰明的你找了個(gè)方法：

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

1. 安裝Apache服務(wù)器，一直下一步直到安裝完成泽西。xampp 集成包下載鏈接
2. 安裝完成之后運(yùn)行apache control panel 然后運(yùn)行apche曹铃、在瀏覽器輸入localhost:80,就可以看到apache主頁
3. 修改Apache服務(wù)器的根目錄指向你的工程文件夾，點(diǎn)擊config按鈕捧杉、修改http.conf DocumentRoot "H:/workspace" 與<Directory "H:/workspace">陕见，把路徑修改成你項(xiàng)目的目錄秘血，然后重啟。再訪問localhost:80/ index.html就可以訪問到你workspace文件夾的index.html文件了
4. 手機(jī)與電腦連在同一個(gè)路由器的wifi评甜、或者手機(jī)連著電腦開啟的wifi灰粮。然后在手機(jī)的瀏覽器中輸入電腦ip地址 + 端口 + 訪問文件的目錄
5. 然后你在瀏覽器上修改頁面，只需要在手機(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ù)器越來越簡單了政模，方法也有很多岗宣，這個(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ù)線楞艾、方法如下：

1. 調(diào)試準(zhǔn)備：
   window7系統(tǒng)安裝chrome
   安卓手機(jī)安裝chrome for Android
   usb數(shù)據(jù)線

2. 步驟

1. USB設(shè)置 在你的手機(jī)里打開"設(shè)置"->"開發(fā)人員工具"->"USB調(diào)試" 打開USB調(diào)試参咙。
2. 假設(shè)你已經(jīng)將手機(jī)設(shè)置為"USB調(diào)試"打開的狀態(tài) 將手機(jī)連接到電腦 手機(jī)會(huì)彈出是否鏈接 點(diǎn)擊確定
3. 打開電腦的chrome 在地址欄輸入 chrome://inspect 選中 Discover USB devices 可以檢測(cè)到你的設(shè)備

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

4. 在手機(jī)chrome瀏覽器中輸入所要打開的網(wǎng)頁鏈接，也可以在瀏覽器 中輸入url硫眯，點(diǎn)擊open就可以在手機(jī)端打開
5. 點(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芽偏，方法如下：

1. 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 的一部分。

2. 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 . . .]
把<script src="http://your-pc-ip:8910/target/target-script-min.js#anonymous"></script>復(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)試方式