如何在 PC 機上測試移動端的網頁？

12-25

如果用 HTML5 寫的頁面，想兼容 iOS、Android 平台的手機，在 PC 機上看有些效果可能不準確，但不可能在每個移動終端都放上去看下效果吧，一般用什麼工具呢？模擬器？有沒有更好的工具推薦？
我知道可以用 Opera 移動版，還可以用 Safari 修改 UA 成 iPad，Chrome也中可以設置，你們都是這樣測嗎？

騰訊這邊有一款非常好的產品，可以測上線的網頁在移動設備的兼容性。

雲端有很多真機，通過網頁可以操作真實手機。

選擇一台：

進入測試：

目前這個對網速的要求比較高，高清模式的話，需要1M/s左右的網速，如果網速不夠的話，可以切換到流暢模式，流暢模式的話畫質不是很清晰，不過也能看。

這個真機的測試應該比模擬器更有優勢，而且目前幾乎就是免費試用。

http://wetest.qq.com/cloud/index.php/help/cloudindex

大騰訊就是有錢

更新下答案，好像最新版的 chrome 本身已經支持 ADB 了，所以就不再需要安裝那些插件啦~~

=======================================================================================

1. Chrome To Mobile

PC機上安裝該chrome插件；在手機端安裝chrome瀏覽器，登錄chrome帳號，啟用「Chrome 轉發至移動設備服務」；在PC端上輸入對應要調試的網址，然後點擊發送到手機，則會將該網址發送到手機端。免去了移動端上輸入網址困難的煩惱。

註：ios chrome 與android chrome 都支持該功能

2-1. 調試—有線

Android chrome + Wndows/Mac OS

Android SDK

(1) 安裝Android SDK

下載&>解壓&>設置PATH為/platform-tools/

(2) 手機啟用USB調試模式

設置&>開發者&>開啟USB調試模式

(3) chrome啟用USB網頁調試

設置&> 開發者工具 &> 啟用USB網頁調試

(4)用USB線連接移動設備

(5)開啟adb伺服器

命令行進入sdk/platform-tools目錄&>輸入

adb forwrad tcp: localabstract:chromedevetoolsremote

(6)訪問localhost:

註：啟動服務遇到錯誤的情況, 運行adb kill-server。 iOS Chrome不支持這種方式調試

ADB Plugin + MAC(2013-6-24更新)

今天偶然發現了這個方案, 有MAC的同學可以完全取代上面的使用SDK調試方法, 畢竟每次啟動命令行挺麻煩的. 步驟如下: (1)下載 Chrome Canary

(2)下載 ADB Plugin 並安裝在Chrome Canary上

(3) 開啟手機 "USB調試模式"

注: 若手機已經開啟過, 可以先關閉再開啟, 避免手機沒有記錄下你機器的物理地址.

(4) 開啟手機chrome USB網頁調試

(5)點擊ADB插件, 有驚喜.

iOS Safari + MAC

該方法只適用safari6.0+的版本。

(1) 手機進入偏好設置，點擊safari，開啟web檢查器；

(2) Mac下進入safari的偏好設置，顯示「開發」菜單；

(3) 手機鏈接Mac，查看MAC Safari 「開發」菜單，會有你的ios設備名的一行選項，這下面的子菜單就是你的ios safari上打開的網頁

2-2. 調試—無線

weinre

該方案我這不介紹了，有興趣的讀者可以網上搜之。因為我很討厭這種調試方式，一個是要引入額外通信腳本，IP一邊，腳本地址又要變；一個是速度慢得要死。用過一次後，就被我拋棄了。

MIHTool

該方法只適用於iOS系統，具體用法就不多說了，直接點擊標題鏈接吧，方便，強大，易上手，移動端有Iphone和Ipad的，我推薦直接用這個工具了。因為沒有那麼多繁瑣的安裝步驟。

3. HOST綁定

(1) PC和MAC開啟代理伺服器

Fiddler

Fiddler只有windows版，所以該方法只適合windows系統。

Fiddler&>Tools&>Fiddler Options&>Connections

Nproxy

node編寫；

安裝簡單： npm install nproxy -g

使用方便： nproxy

默認運行在8989埠，加-p選項和埠號可以設置運行的埠

適用於win和mac，同時也具備了fiddler的文件替換功能，具體可以點擊標題鏈接查看更詳細的功能。

註：該工具目前暫時無法代理手機端下的https請求，已經反饋給作者，期待修復。

(2) 手機端設置代理

進入wifi設置，選擇手動輸入代理伺服器，輸入PC和MAC的IP及相關埠即可。此時，手機使用的就是你桌面機器的hosts。

PS: Android上有個設置代理的應用，叫DroidProxy，可以幫你保存設置過的代理地址，這樣你就不用每次都再去輸入代理地址了。 iOS大家可以補充下。

我的心得和總結

我自己使用的方案如下：

Chrome To Mobile（必備了，沒什麼選擇）

調試上：

iOS設備上使用 MIHTOOL，實在是方便。

Android機上只選擇usb調試， weinre太噁心了，太噁心了= =！

hosts綁定上：

我選擇的是nproxy，一行命令就開啟了代理，且資源消耗小，另一方面，擼主有MAC- -!

調試:

打開chrome 輸入網址,按F12呼出調試器,按esc就會底下再冒上來一坨,選 emulation
在Chrome里開發網頁你懂的,各種好
除了
字體是不一樣的,導致文字寬度都可能不一樣,繼續導致在手機里會掉下去什麼的
還有Retina什麼的,1px的線之類的

iOS:

然後Safari里直接能調出來調試器

這個傲嬌的公司...,在PC下推薦用 VMWare 跑個 Mavericks
這OS比較吃硬體,我用的是Alienware,之前Thinkpad W500跑的略累

Android:

然後Chrome里直接能出來調試器

官方: Android SDK | Android Developers
不過強烈推薦 Genymotion - 完爆 Android SDK 模擬器速度賊快

===update====
基友這邊團隊開發了
微信web開發者工具
牆!裂!推!薦!

電腦里用localhost的話，用手機訪問電腦的內網ip（前提是手機和電腦在同一個區域網下）

Chrome(33)自帶的Mobile emulation(https://developers.google.com/chrome-developer-tools/docs/mobile-emulation，鏈接裡面有使用說明)，測試起來就很方便了。可以精確指定屏幕尺寸，還支持觸摸、地理位置、重力感測的模擬。
Firefox27的開發者工具裡面有個「響應式設計模式」，也可以限制屏幕尺寸，不過相比Chrome弱爆了。
它們的好處是調試起來極為方便，缺點是沒有真正的安卓模擬器那麼完美。
所以我有時候還會使用Genymotion，一個Andriod虛擬機，速度快，運行極為流暢。

2015-1-29 更新：自薦一篇文章移動端前端開發調試

--------

看了一下， @大貓前輩的比較簡單，但是移動端不一定跟手機模擬功能效果一樣，一般需要使用實際設備做輔助測試。

目前我採用的方案：

chrome 手機模擬功能 —— 快速高效調試。
http://browsersync.io 同步測試 —— 快速看到真實移動端的效果。

大體步驟就是：

開啟 browsersync 的本地伺服器，chrome 手機模擬功能打開，電腦做 wifi，手機連入區域網並打開 browsersync 創建的本地伺服器就可以看到效果。

然後編寫代碼，保存，手機和 chrome 自動刷新看到效果，移動端出現問題，在 chrome 調整，編輯代碼，保存看效果。

browsersync 的引入，不再需要重複刷新，而且多設備同時測試直接看到效果，而且在一台設備上的操作（例如滾動）在其他設備上也同時滾動！

就是最近手殘電腦裝了個網卡驅動，一做 wifi 就掉線 T T

不要相信修改ua，移動端瀏覽器遠沒有那麼簡單。支持的功能不完整，還有些特性跟桌面不一樣。例如一些觸摸特性，桌面瀏覽器表現不給力。

保險的方式就是用模擬器，xcode中的ios模擬器，還有android模擬器。

ios模擬器可以直接訪問本機localhost，很方便。android的貌似不行，要本機搭建伺服器然後用ip地址調試。

mac下有個weinre的軟體，可以在手機上用類似chrome developer tool的東西來調試結構和控制台。很方便。android的做的比較少，沒什麼經驗。

開發及調試：
可以使用最新版的chrome，我這裡的是19.0.1084.56，在開發者工具的設置里把Emulate touch events勾選上，這樣就可以用滑鼠模擬swipeleft,swiperight,tap這類事件。

MAC上使用最新版的safari,IOS設備升級到IOS6，設備用線連接到電腦，可以在safari的開發里看到設備，這裡可以使用開發者工具來真機調試。

屏幕大小可以自己寫一個小的測試頁面，用一個iframe載入你的頁面，設置iframe的寬高，用這樣的方式在PC上模擬設備的寬高
類似這樣
http://www.testiphone.com/
http://iphone4simulator.com/

Android設備上的chrome是支持遠程調試，具體開啟方法Google一下吧

這裡有一個非常有用的書籤，包含各種小工具
http://stevesouders.com/mobileperf/mobileperfbkm.php

遠程打log可以試試這個
http://jsconsole.com/ 我用的時候非常不爽，很慢

真機測試：
主要就是代理的使用了
windows可以用fiddler作代理
mac下可以用Charles
如果你跟我一樣不用windows又不花錢買Charles可以用nginx作代理
在開發機上設置代理，比如nginx的可以這樣配置，同時配置一個獨立域名http://touch.renren.com到開發機，保證開發機和調試設備在同一個區域網內。
server {
resolver 8.8.8.8;
resolver_timeout 1s;
listen 8888;

location / {
if ($host ~* http://touch.renren.com) {
proxy_pass http://127.0.0.1;
}

if ($host !~* http://touch.renren.com) {
proxy_pass $scheme://$host$request_uri;
}

proxy_set_header Host $http_host;

proxy_buffers 256 8k;
proxy_max_temp_file_size 0;
proxy_connect_timeout 30;
proxy_cache_valid 200 302 10m;
proxy_cache_valid 301 1h;
proxy_cache_valid any 1m;
}
}

零碎的寫這些，同學們可以多補充補充，我有想到，回來補，有不對的也歡迎指正

這個問題太老了，我來為說chrome的答案po一個新圖吧。

UC瀏覽器開發者版

看來我要獻出在知乎寶貴的第一答了。
在答之前，我想先講一個故事。
我有個哥們在北上廣某知名互聯網公司做H5的前端開發，快30了，都沒談過女朋友。每次跟他出來吃飯喝酒，就聽丫逼逼叨叨說著他們項目組的一個妹子，看那表情是真喜歡啊！但他沒勇氣表白，我們再攛掇都沒用。
上個月他們發一個小版本，忙到深夜差不多了，大家都走了，就剩他跟妹子兩個人。他把代碼又翻來複去的改改改，然後發給了妹子。
沒幾分鐘，妹子跑過來跟他說，快幫我看看，為什麼測出來的性能數據全是520？

現在他倆在一起了！在一起了！

上面這個截圖，是妹子用騰訊優測測出來的H5頁面核心性能指標，這哥們改了好幾個晚上，終於化文字為數字，勇敢的表白了！
騰訊優測主打的是真機測試，上面這些性能數據全都是在多台主流真機上跑出來的，所以會有最大值最小值，方便對比分析。並且還會在這些真機上做兼容適配，直接把頁面在手機屏幕上的展示效果截圖出來給你看。重要的是，輸入URL就能測，10分鐘內出結果！