本文首次發(fā)表于本人的個(gè)人博客：http://cherryblog.site/ 掌敬，歡迎大家到我的博客查看更多文章~

前言

在開(kāi)發(fā)中前端免不了要進(jìn)行移動(dòng)端的開(kāi)發(fā)包各，然而在電腦上看的樣式和手機(jī)上還是有一定的差距的湾碎，因?yàn)槭謾C(jī)上有頂部的狀態(tài)欄和底部的菜單欄用狱，特別是在qq內(nèi)置瀏覽器中打開(kāi)，差距還是蠻大的幢踏，所以在chrom中模擬手機(jī)顯示的情況雖然有一定的效果捏题，但是還是不能完全模擬玻褪，我們還需要在真機(jī)環(huán)境下測(cè)試。
本文介紹的調(diào)試方法有一下幾種：

• iphone+safari
• android手機(jī)+pc
• 微信開(kāi)發(fā)者工具
• weinre
• 使用webstorm
• 使用Fiddle抓包

這幾種方法基本說(shuō)涵蓋了我們平時(shí)開(kāi)發(fā)中所遇到的各種情況公荧，各種主流設(shè)備都可以覆蓋带射。其中最方便快捷的是使用webstorm自帶的服務(wù)器，只需要一鍵就可以~循狰，但是這樣只能預(yù)覽窟社，不能調(diào)試。
我個(gè)人比較推薦的方法是iphone+safari或者安卓手機(jī)+pc的這種方式绪钥，比較簡(jiǎn)單方便快捷灿里，然后根據(jù)具體的環(huán)境再選擇更為合適的調(diào)試方法。
目前我認(rèn)為使用weinre+fiddle是萬(wàn)能的程腹，沒(méi)有什么調(diào)試不了了_{但是需要學(xué)習(xí)的成本也是最高的}
希望大家都能夠?qū)懗銎恋捻?yè)面匣吊，不需要為調(diào)試發(fā)愁哈~

iphone+safari

之前使用的是mac，所以一直都是用的iphone+safari模擬真機(jī)環(huán)境跪楞，這種方法簡(jiǎn)單明了缀去，只需要簡(jiǎn)單的設(shè)置一下以后都不要設(shè)置侣灶，插上數(shù)據(jù)線(xiàn)甸祭，打開(kāi)mac上的safari就可以了，(??????)?褥影，?池户，但是對(duì)設(shè)備有要求，必須是iphone+mac的組合

iphone上設(shè)置

設(shè)置 → Safari → 高級(jí) → Web 檢查器 → 開(kāi)凡怎。

iphone上設(shè)置

pc端safari設(shè)置

Safari → 偏好設(shè)置 → 高級(jí) → 在菜單欄中顯示“開(kāi)發(fā)”菜單

pc端safari設(shè)置

設(shè)置完之后用數(shù)據(jù)線(xiàn)連接電腦校焦，然后在iphone上用打開(kāi)safari需要調(diào)試的網(wǎng)址，然后在pc端打開(kāi)safari统倒，最上面的菜單欄中的“開(kāi)發(fā)”然后就可以看到有iphone設(shè)備的名稱(chēng)顯示然后就可以看見(jiàn)你在iphone中的safari中打開(kāi)了哪些網(wǎng)址寨典，之后就和調(diào)試網(wǎng)頁(yè)版的一樣了

android手機(jī)+pc

安卓手機(jī)只需要下載chrom瀏覽器，就可以再電腦上用chrom調(diào)試了房匆，是不是很贊(づ￣3￣)づ╭

1. 首先需要裝chrom瀏覽器

2. 打開(kāi)手機(jī)的開(kāi)發(fā)者模式耸成，一般是：設(shè)置->關(guān)于手機(jī)->版本號(hào)連按5次报亩，之后設(shè)置菜單中會(huì)多出一個(gè)開(kāi)發(fā)人員選項(xiàng)，進(jìn)入將其中的“usb調(diào)試”打開(kāi)
   

3. 將手機(jī)與電腦通過(guò)usb連接井氢，彈出對(duì)話(huà)框“是否允許usb調(diào)試”弦追，選擇確定
   
4. 在手機(jī)chrom上打開(kāi)要調(diào)試的頁(yè)面
5. 在電腦上打開(kāi)chrom，新開(kāi)一地址欄為chrome://inspect/的頁(yè)面,然后就可以調(diào)試了
   
6. 點(diǎn)擊inspect彈出chrom調(diào)試工具

微信開(kāi)發(fā)者工具

由于不可描述原因花竞，有些頁(yè)面只在微信里面出錯(cuò)劲件，并且好多涉及到了微信相關(guān)的接口必須要使用微信環(huán)境的，比如自定義分享

前期準(zhǔn)備

這個(gè)使用起來(lái)很方便约急。（我記得之前使用的時(shí)候（2016年）零远，你要調(diào)試的頁(yè)面必須是你是管理員的微信公眾號(hào)下面的js安全域名下的地址），但是剛剛下載一個(gè)新版本的開(kāi)發(fā)者工具（v0.7.0）烤宙，現(xiàn)在的時(shí)間是2017年3月28日遍烦，發(fā)現(xiàn)好像沒(méi)有這個(gè)限制了。所以這樣開(kāi)發(fā)起來(lái)就方便多了躺枕。

官方文檔&下載地址

官方文檔其中有下載地址

模擬微信環(huán)境調(diào)試

直接在地址欄輸入地址就可以模擬微信環(huán)境調(diào)試服猪，是不是很方便~這種方式可以滿(mǎn)足大部分的需求

真機(jī)調(diào)試

在開(kāi)發(fā)者工具中的移動(dòng)調(diào)試中可以有詳細(xì)的ios和安卓的調(diào)試方式，主要是使用代理拐云，這里我沒(méi)有調(diào)試成功罢猪，在手機(jī)微信中一直打不開(kāi)網(wǎng)頁(yè)，所以就不詳細(xì)寫(xiě)了╥﹏╥...

---------------3.29更---------------------
我找到設(shè)置代理之后打不開(kāi)網(wǎng)頁(yè)的原因了叉瘩，在使用fiddler抓包的時(shí)候也遇到了同樣的問(wèn)題膳帕，原來(lái)這里需要下載認(rèn)證
在設(shè)置完當(dāng)前網(wǎng)絡(luò)的代理之后，在瀏覽器輸入本機(jī)的ip地址和ip號(hào)薇缅，下載fiddler的證書(shū)

然后根據(jù)提示一步一步安裝就可以了危彩。
安裝完證書(shū)就可以打開(kāi)網(wǎng)頁(yè)了

weinre

跟著我念三遍weinre大法好，weinre大法好泳桦，weinre大法好~
之前介紹的幾種方式或多或少都有一些條件限制汤徽，但是weinre沒(méi)有啊喂！就比如我是ios+windows的組合灸撰，就不能使用iphone+safari和安卓+pc的方式調(diào)試谒府，所以使用weinre就可以！浮毯！
缺點(diǎn)就是配置起來(lái)有削微的麻煩~

什么是weinre

weinre是web inspector remote（遠(yuǎn)程web檢查器）的縮寫(xiě)

安裝weinre

目前安裝weinre我了解到有兩種方式：node和java兩種方式

node方式安裝weinre

首先確保你的電腦上有node環(huán)境完疫，然后使用npm來(lái)安裝
windows下
npm install weinre -g --registry=https://registry.npm.taobao.org
mac下
sudo npm install weinre -g --registry=https://registry.npm.taobao.org

java環(huán)境下安裝weinre

首先確認(rèn)你電腦上裝好的java環(huán)境，然后下載weinre的jar包债蓝，上百度云盤(pán)的鏈接：鏈接: https://pan.baidu.com/s/1slRiOl3 密碼: dsmp

運(yùn)行weinre

node環(huán)境下

weinre --httpPort 8081 --boundHost -all-
8081是調(diào)試服務(wù)器運(yùn)行的端口號(hào)壳鹤，
boundHost是調(diào)試服務(wù)器綁定的ip地址或域名，默認(rèn)是localhost饰迹，設(shè)置為-all-是為了在本地能使用localhost打開(kāi)芳誓，在移動(dòng)設(shè)備或本地環(huán)境用ip地址打開(kāi)weinre調(diào)試工具

java環(huán)境下

在weinre所在文件夾的地址欄輸入代碼：java -jar weinre.jar --httpPort 8081 --boundHost -all-

開(kāi)始調(diào)試

設(shè)置好端口之后我們?cè)诒镜卮蜷_(kāi)http://192.168.0.126:8081然后就可以看見(jiàn)weinre的基本信息

之后我們需要在需要調(diào)試的頁(yè)面上加上一段script標(biāo)簽
<script src="http://192.168.0.126:8081/target/target-script-min.js#anonymous"></script>
需要改為你自己的ip地址

ip的查詢(xún)方式

在cmd輸入ipconfig讯嫂，然后ipv4中后面跟的就是本機(jī)的ip地址

手機(jī)打開(kāi)需要調(diào)試的鏈接

在staticWebDir目錄下

本地的源文件貌似只能在staticWebDir目錄下才可以訪(fǎng)問(wèn)到（這是因?yàn)樵跊](méi)有使用任何服務(wù)器的情況下，weinre自帶有服務(wù)器兆沙，所以只能放在默認(rèn)的根目錄下）欧芽，將你的源文件放在staticWebDir目錄下，staticWebDir的目錄是你安裝weinre的根目錄葛圃，我的是：C:\Users\supfn\AppData\Roaming\npm\node_modules\weinre\web千扔，然后手機(jī)訪(fǎng)問(wèn):http://192.168.0.126/contact_page/index.html，然后在電腦上打開(kāi)剛剛的頁(yè)面http://196.168.0.126:8081

在xampp下

因?yàn)楣镜捻?xiàng)目是在xampp下的褥符，已經(jīng)配置好了apache龙誊，可以直接在平時(shí)的項(xiàng)目前加上本地的ip，在手機(jī)上訪(fǎng)問(wèn)就好喷楣。
項(xiàng)目存放的地址是xampp\htdocs\app
修改配置：
C:\Windows\System32\drivers\etc\hosts文件下
最后一行
127.0.0.1 localhost ltrip.com fzc.com m.fzc.com m.ltrip.com
然后在C:\xampp\apache\conf\extra文件里面修改

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\ltrip"
    ServerName ltrip.com 
    ServerAlias 
  <Directory "C:\xampp\htdocs\ltrip">
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
  </Directory>
</VirtualHost>

其中的ServerName ltrip.com中的ltrip.com就代替了"C:\xampp\htdocs\ltrip"這個(gè)路徑趟大，
所以就不需要放在staticWebDir目錄下了，這樣手機(jī)打開(kāi)的地址就變成了:http://192.168.0.168/ltrip.com

使用webstorm

在最先開(kāi)始使用weinre的時(shí)候铣焊，一直卡在一個(gè)地方逊朽，就是手機(jī)訪(fǎng)問(wèn)的地址問(wèn)題，在看教程的時(shí)候我就卡在不知道怎么輸入手機(jī)打開(kāi)的網(wǎng)址曲伊，因?yàn)槲沂亲约簩?xiě)的一個(gè)簡(jiǎn)單的html的demo叽讳，在本地打開(kāi)的地址是使用本地的絕對(duì)路徑比如file:///C:/Users/supfn/Desktop/contact_page/index.html這樣子的，在手機(jī)肯定訪(fǎng)問(wèn)不到我的電腦上的路徑坟募。
這里是需要在本地搭建一個(gè)服務(wù)器岛蚤，這樣才能在手機(jī)訪(fǎng)問(wèn)到你電腦上的資源，通過(guò)服務(wù)器其他人也可以訪(fǎng)問(wèn)你電腦上的資源懈糯，常見(jiàn)的服務(wù)器有apache涤妒，使用Java的還可以用tomcat。這些使用起來(lái)都比較麻煩昂利，這里推薦一個(gè)簡(jiǎn)單的方式届腐，使用webstorm铁坎。
webstorm集成了debugger服務(wù)器蜂奸，所以可以直接在你項(xiàng)目html頁(yè)面的右上角點(diǎn)擊瀏覽器的圖標(biāo)，在對(duì)應(yīng)瀏覽器打開(kāi)項(xiàng)目硬萍，然后將地址欄上的localhost改為你的ip地址扩所，手機(jī)訪(fǎng)問(wèn)這個(gè)地址就可以了~
簡(jiǎn)直不要太方便！朴乖！所以webstorm真的是web開(kāi)發(fā)利器祖屏，而不止是一個(gè)編輯器

使用Fiddle抓包

如果是要調(diào)試線(xiàn)上代碼的話(huà)經(jīng)常是無(wú)法再頁(yè)面中直接加入script標(biāo)簽的助赞，然后我們可以利用fiddler為頁(yè)面設(shè)置斷點(diǎn)，然后注入js代碼袁勺，在run就可以了~
fiddler是用過(guò)改寫(xiě)http代理雹食，讓數(shù)據(jù)從它這通過(guò)，來(lái)監(jiān)控截取到的數(shù)據(jù)期丰。在打開(kāi)fiddler的時(shí)候群叶，就已經(jīng)自動(dòng)設(shè)置好了瀏覽器的代理了，關(guān)閉的時(shí)候钝荡，它又把代理還原了

下載fiddler

Fiddler 下載地址 ：https://www.telerik.com/download/fiddler
Fiddler 離線(xiàn)下載地址：http://pan.baidu.com/s/1i3NvE8P 密碼：ozem

使用fiddler抓取數(shù)據(jù)包

在手機(jī)上設(shè)置同一個(gè)局域網(wǎng)上的代理街立，代理服務(wù)器設(shè)置為電腦的ip地址，端口為8888
在fiddler上埠通，點(diǎn)擊菜單欄中的 [Tools] –> [Fiddler Options]

點(diǎn)擊 [Connections] 赎离，設(shè)置代理端口是8888， 勾選 Allow remote computers to connect端辱， 點(diǎn)擊OK

使用weinre與fiddler組合

我們要實(shí)現(xiàn)的目標(biāo)就是要調(diào)試線(xiàn)上的代碼梁剔，使用fiddler在代碼中注入weinre需要加上的script標(biāo)簽
在完成配置之后打開(kāi)要調(diào)試的鏈接，然后在fiddler中設(shè)置斷點(diǎn)
我們?cè)趂iddler中打下頁(yè)面斷點(diǎn),bpafter + 想要打斷點(diǎn)的網(wǎng)址

這里寫(xiě)圖片描述

參考文章

• Fiddler 抓包工具總結(jié)
• 移動(dòng)端調(diào)試工具weinre安裝教程（java版）
• 聊一聊移動(dòng)調(diào)試那些事兒