本文首次發表於本人的個人部落格: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 ̄)づ╭
- 首先需要裝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大法好~
之前介紹的幾種方式或多或少都有一些條件限制,但是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中除錯了~
參考文章