移動端真機除錯實戰經驗

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中除錯了~

參考文章

相關文章