移動端真機調試實戰經驗

本文首次發表於本人的我的博客：cherryblog.site/ ，歡迎你們到個人博客查看更多文章~

前言

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

• iphone+safari
• android手機+pc
• 微信開發者工具
• weinre
• 使用webstorm
• 使用Fiddle抓包

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

iphone+safari

以前使用的是mac，因此一直都是用的iphone+safari模擬真機環境，這種方法簡單明瞭，只須要簡單的設置一下之後都不要設置，插上數據線，打開mac上的safari就能夠了，(๑•̀ㅂ•́)و，✧，可是對設備有要求，必須是iphone+mac的組合

iphone上設置

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

這裏寫圖片描述

pc端safari設置

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

這裏寫圖片描述

設置完以後用數據線鏈接電腦，而後在iphone上用打開safari須要調試的網址，而後在pc端打開safari，最上面的菜單欄中的「開發」而後就能夠看到有iphone設備的名稱顯示而後就能夠看見你在iphone中的safari中打開了哪些網址，以後就和調試網頁版的同樣了

android手機+pc

安卓手機只須要下載chrom瀏覽器，就能夠再電腦上用chrom調試了，是否是很贊(づ￣3￣)づ╭

1. 首先須要裝chrom瀏覽器
2. 打開手機的開發者模式，通常是：設置->關於手機->版本號連按5次，以後設置菜單中會多出一個開發人員選項，進入將其中的「usb調試」打開

   

3. 將手機與電腦經過usb鏈接，彈出對話框「是否容許usb調試」，選擇肯定

   

4. 在手機chrom上打開要調試的頁面
5. 在電腦上打開chrom，新開一地址欄爲chrome://inspect/的頁面,而後就能夠調試了

   

6. 點擊inspect彈出chrom調試工具

微信開發者工具

因爲不可描述緣由，有些頁面只在微信裏面出錯，而且好多涉及到了微信相關的接口必需要使用微信環境的，好比自定義分享

前期準備

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

官方文檔&下載地址

官方文檔其中有下載地址

模擬微信環境調試

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

真機調試

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

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

而後根據提示一步一步安裝就能夠了。
安裝完證書就能夠打開網頁了

weinre

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

什麼是weinre

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

安裝weinre

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

node方式安裝weinre

首先確保你的電腦上有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

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

運行weinre

node環境下

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

java環境下

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

開始調試

設置好端口以後咱們在本地打開http://192.168.0.126:8081而後就能夠看見weinre的基本信息

以後咱們須要在須要調試的頁面上加上一段script標籤
<script src="http://192.168.0.126:8081/target/target-script-min.js#anonymous"></script>
須要改成你本身的ip地址

ip的查詢方式

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

手機打開須要調試的連接

在staticWebDir目錄下

本地的源文件貌似只能在staticWebDir目錄下才能夠訪問到（這是由於在沒有使用任何服務器的狀況下，weinre自帶有服務器，因此只能放在默認的根目錄下），將你的源文件放在staticWebDir目錄下，staticWebDir的目錄是你安裝weinre的根目錄，個人是：C:\Users\supfn\AppData\Roaming\npm\node_modules\weinre\web，而後手機訪問:http://192.168.0.126/contact_page/index.html，而後在電腦上打開剛剛的頁面http://196.168.0.126:8081

點擊 debug client user interface以後出現

，點擊藍色的連接，變爲綠色的以後就說明連接成功了。在後面的 elements和其餘的tag就能夠進行調試

在xampp下

由於公司的項目是在xampp下的，已經配置好了apache，能夠直接在平時的項目前加上本地的ip，在手機上訪問就好。
項目存放的地址是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"這個路徑，
因此就不須要放在staticWebDir目錄下了，這樣手機打開的地址就變成了:http://192.168.0.168/ltrip.com

使用webstorm

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

使用Fiddle抓包

若是是要調試線上代碼的話常常是沒法再頁面中直接加入script標籤的，而後咱們能夠利用fiddler爲頁面設置斷點，而後注入js代碼，在run就能夠了~
fiddler是用過改寫http代理，讓數據從它這經過，來監控截取到的數據。在打開fiddler的時候，就已經自動設置好了瀏覽器的代理了，關閉的時候，它又把代理還原了

下載fiddler

Fiddler 下載地址 ：www.telerik.com/download/fi…
Fiddler 離線下載地址：pan.baidu.com/s/1i3NvE8P 密碼：ozem

使用fiddler抓取數據包

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

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

使用weinre與fiddler組合

咱們要實現的目標就是要調試線上的代碼，使用fiddler在代碼中注入weinre須要加上的script標籤
在完成配置以後打開要調試的連接，而後在fiddler中設置斷點
咱們在fiddler中打下頁面斷點,bpafter + 想要打斷點的網址

再次訪問該網站，發現本條請求被block住了

這裏寫圖片描述

而後在右邊加上weinre須要的script標籤 <script src="http://192.168.0.126:8081/target/target-script-min.js#anonymous"></script>
而後點擊右邊代碼上面綠色的run to completion就能夠看到注入js的效果了，以後咱們就能夠在weinre中調試了~

參考文章

• Fiddler 抓包工具總結
• 移動端調試工具weinre安裝教程（java版）
• 聊一聊移動調試那些事兒