摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。

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

在開發中前端免不了要進行移動端的開發，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態欄和底部的菜單欄，特別是在qq內置瀏覽器中打開，差距還是蠻大的，所以在chrom中模擬手機顯示的情況雖然有一定的效果，但是還是不能完全模擬，我們還需要在真機環境下測試。
本文介紹的調試方法有一下幾種：

iphone+safari

android手機+pc

微信開發者工具

weinre

使用webstorm

使用Fiddle抓包

這幾種方法基本說涵蓋了我們平時開發中所遇到的各種情況，各種主流設備都可以覆蓋。其中最方便快捷的是使用webstorm自帶的服務器，只需要一鍵就可以~，但是這樣只能預覽，不能調試。
我個人比較推薦的方法是iphone+safari或者安卓手機+pc的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。
目前我認為使用weinre+fiddle是萬能的，沒有什么調試不了了~但是需要學習的成本也是最高的~
希望大家都能夠寫出漂亮的頁面，不需要為調試發愁哈~

之前使用的是mac，所以一直都是用的iphone+safari模擬真機環境，這種方法簡單明了，只需要簡單的設置一下以后都不要設置，插上數據線，打開mac上的safari就可以了，(??????)?，?，但是對設備有要求，必須是iphone+mac的組合

設置 → Safari → 高級 → Web 檢查器 → 開。

Safari → 偏好設置 → 高級 → 在菜單欄中顯示“開發”菜單

設置完之后用數據線連接電腦，然后在iphone上用打開safari需要調試的網址，然后在pc端打開safari，最上面的菜單欄中的“開發”然后就可以看到有iphone設備的名稱顯示然后就可以看見你在iphone中的safari中打開了哪些網址，之后就和調試網頁版的一樣了

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

首先需要裝chrom瀏覽器

打開手機的開發者模式，一般是：設置->關于手機->版本號連按5次，之后設置菜單中會多出一個開發人員選項，進入將其中的“usb調試”打開

將手機與電腦通過usb連接，彈出對話框“是否允許usb調試”，選擇確定

在手機chrom上打開要調試的頁面

在電腦上打開chrom，新開一地址欄為chrome://inspect/的頁面,然后就可以調試了

點擊inspect彈出chrom調試工具

由于不可描述原因，有些頁面只在微信里面出錯，并且好多涉及到了微信相關的接口必須要使用微信環境的，比如自定義分享

這個使用起來很方便。（我記得之前使用的時候（2016年），你要調試的頁面必須是你是管理員的微信公眾號下面的js安全域名下的地址），但是剛剛下載一個新版本的開發者工具（v0.7.0），現在的時間是2017年3月28日，發現好像沒有這個限制了。所以這樣開發起來就方便多了。

官方文檔其中有下載地址

直接在地址欄輸入地址就可以模擬微信環境調試，是不是很方便~這種方式可以滿足大部分的需求

在開發者工具中的移動調試中可以有詳細的ios和安卓的調試方式，主要是使用代理，這里我沒有調試成功，在手機微信中一直打不開網頁，所以就不詳細寫了╥﹏╥...

---------------3.29更---------------------
我找到設置代理之后打不開網頁的原因了，在使用fiddler抓包的時候也遇到了同樣的問題，原來這里需要下載認證
在設置完當前網絡的代理之后，在瀏覽器輸入本機的ip地址和ip號，下載fiddler的證書

然后根據提示一步一步安裝就可以了。
安裝完證書就可以打開網頁了

跟著我念三遍weinre大法好，weinre大法好，weinre大法好~
之前介紹的幾種方式或多或少都有一些條件限制，但是weinre沒有啊喂！就比如我是ios+windows的組合，就不能使用iphone+safari和安卓+pc的方式調試，所以使用weinre就可以！！
缺點就是配置起來有削微的麻煩~

weinre是web inspector remote（遠程web檢查器）的縮寫

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

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

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

weinre --httpPort 8081 --boundHost -all-
8081是調試服務器運行的端口號，
boundHost是調試服務器綁定的ip地址或域名，默認是localhost，設置為-all-是為了在本地能使用localhost打開，在移動設備或本地環境用ip地址打開weinre調試工具

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

設置好端口之后我們在本地打開http://192.168.0.126:8081然后就可以看見weinre的基本信息

之后我們需要在需要調試的頁面上加上一段script標簽

需要改為你自己的ip地址

在cmd輸入ipconfig，然后ipv4中后面跟的就是本機的ip地址

本地的源文件貌似只能在staticWebDir目錄下才可以訪問到（這是因為在沒有使用任何服務器的情況下，weinre自帶有服務器，所以只能放在默認的根目錄下），將你的源文件放在staticWebDir目錄下，staticWebDir的目錄是你安裝weinre的根目錄，我的是：C:UserssupfnAppDataRoaming pm ode_modulesweinreweb，然后手機訪問:http://192.168.0.126/contact_page/index.html，然后在電腦上打開剛剛的頁面http://196.168.0.126:8081點擊debug client user interface之后出現
，點擊藍色的鏈接，變為綠色的之后就說明鏈接成功了。在后面的elements和其他的tag就可以進行調試

因為公司的項目是在xampp下的，已經配置好了apache，可以直接在平時的項目前加上本地的ip，在手機上訪問就好。
項目存放的地址是xampphtdocsapp
修改配置：
C:WindowsSystem32driversetchosts文件下
最后一行
127.0.0.1 localhost ltrip.com fzc.com m.fzc.com m.ltrip.com
然后在C:xamppapacheconfextra文件里面修改

    DocumentRoot "C:xampphtdocsltrip"
    ServerName ltrip.com 
    ServerAlias 
  
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
  

其中的ServerName ltrip.com 中的ltrip.com就代替了 "C:xampphtdocsltrip"這個路徑，
所以就不需要放在staticWebDir目錄下了，這樣手機打開的地址就變成了:http://192.168.0.168/ltrip.com

在最先開始使用weinre的時候，一直卡在一個地方，就是手機訪問的地址問題，在看教程的時候我就卡在不知道怎么輸入手機打開的網址，因為我是自己寫的一個簡單的html的demo，在本地打開的地址是使用本地的絕對路徑比如file:///C:/Users/supfn/Desktop/contact_page/index.html這樣子的，在手機肯定訪問不到我的電腦上的路徑。
這里是需要在本地搭建一個服務器，這樣才能在手機訪問到你電腦上的資源，通過服務器其他人也可以訪問你電腦上的資源，常見的服務器有apache，使用Java的還可以用tomcat。這些使用起來都比較麻煩，這里推薦一個簡單的方式，使用webstorm。
webstorm集成了debugger服務器，所以可以直接在你項目html頁面的右上角點擊瀏覽器的圖標，在對應瀏覽器打開項目，然后將地址欄上的localhost改為你的ip地址，手機訪問這個地址就可以了~
簡直不要太方便！！所以webstorm真的是web開發利器，而不止是一個編輯器

如果是要調試線上代碼的話經常是無法再頁面中直接加入script標簽的，然后我們可以利用fiddler為頁面設置斷點，然后注入js代碼，在run就可以了~
fiddler是用過改寫http代理，讓數據從它這通過，來監控截取到的數據。在打開fiddler的時候，就已經自動設置好了瀏覽器的代理了，關閉的時候，它又把代理還原了

Fiddler 下載地址 ：https://www.telerik.com/downl...
Fiddler 離線下載地址：http://pan.baidu.com/s/1i3NvE8P 密碼：ozem

在手機上設置同一個局域網上的代理，代理服務器設置為電腦的ip地址，端口為8888
在fiddler上，點擊菜單欄中的 [Tools] –> [Fiddler Options]

點擊 [Connections] ，設置代理端口是8888， 勾選 Allow remote computers to connect， 點擊OK

我們要實現的目標就是要調試線上的代碼，使用fiddler在代碼中注入weinre需要加上的script標簽
在完成配置之后打開要調試的鏈接，然后在fiddler中設置斷點
我們在fiddler中打下頁面斷點,bpafter + 想要打斷點的網址
再次訪問該網站，發現本條請求被block住了

然后在右邊加上weinre需要的script標簽
然后點擊右邊代碼上面綠色的run to completion就可以看到注入js的效果了，之后我們就可以在weinre中調試了~

參考文章

Fiddler 抓包工具總結

移動端調試工具weinre安裝教程（java版）

聊一聊移動調試那些事兒