移動端真機除錯實戰經驗

sunshine小小倩發表於2019-03-03
除錯

本文首次發表於本人的個人部落格：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中除錯了~

參考文章

相關文章