在電腦上測試手機網站

最近公司要開發網站的移動版，讓我準備準備知識，話說本人開發移動網站的經驗還真很少，最悲劇的事情就是個人手機是個經典的諾基亞，並且公司還不給配手機，這是有多討厭，沒辦法，沒有手機只能用電腦模擬了，相辦法代替，查了不少資料，嘗試了大部分方法，下面將這一天的努力總結下分享給你們，也讓你們免去看那麼多文章，如下介紹的方法，都是本人親自測試成功的方法，測試環境winxp。

Chrome*

chrome模擬手機總共有四種方法，原理都同樣，經過假裝User-Agent，將瀏覽器模擬成Android設備。如下標星的爲推薦方法。

1.新建Chrome快捷方式

右擊桌面上的Chrome瀏覽器圖標，在彈出的右鍵菜單中選擇「複製」，複製一個圖標副本到桌面。右擊該副本，選擇「屬性」，打開相應的對話框，在「目標」文本框的字符後面添加如下語句：「--user-agent="Android"」，以下圖：

注意user前面是兩個「-」，而且「chrome.exe」與「--user」之間有一個空格。肯定以後，打開這個新建的Chrome快捷方式，輸入3g.qq.com就能夠瀏覽到像手機裏打開同樣的頁面了。

2.一次性模擬iPhone和安卓手機

開始–運行中輸入如下命令，啓動瀏覽器：

模擬谷歌Android：

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

模擬蘋果iPhone：

chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

這種方法僅供特殊狀況下使用，由於重啓Chrome將不能恢復正常User-Agent，因此是一次性shouji.115sou.com。

更多的user-agent請自行搜索。

3.安裝插件

插件能夠很方便切換各類user-agent，很方便，可是可能會稍微影像性能。

User-Agent Selector地址：https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related

 

從上圖能夠看到，還有不少相似的插件，其實功能都大同小異。

4：自帶模擬器*

打開chrome開發者工具，按F12（r32版本）1，而後找到右上角的齒輪按鈕，打開設置面板，選擇Overrides，勾上Show 'Emulation' view in console drawer（在控制檯視圖中顯示「仿真」）qq.115sou.com。

而後關閉設置面板，選擇Elements面板（非Console就能夠），找到右上角打開控制檯面板，選擇控制檯面板裏的Emulation面板，右邊有不少選項，選擇一個點擊Emulate就能夠了，Reset按鈕能恢復到默認狀態。

打開仿真後，打開http://yanhaijing.com，便可看到以下的手機下的界面

這種方法簡單好用，並且不須要重啓，推薦這種方法。

注意：以上第一種和第二種方法都須要將所有打開的chrome窗口關閉，再打開才能起做用。

Firefox

1.修改user-agent

和chrome同樣安裝插件修改user-agent的方法

具體方法移步這裏：http://blog.sina.com.cn/s/blog_645813a30100qf68.html

2.火狐響應式設計+修改user-agent*

最近的火狐本身添加響應式設計功能和3D試圖都很棒，打開火狐本身的控制檯（非firebug），找到右上角的響應式設計按鈕。doc.115sou.com

打開後即切換到響應式設計界面

但咱們看到打開QQ的站點並未被自動引到QQ的移動頁面，這樣只對響應式設計的界面起做用，對想QQ這樣雲端判斷，返回不一樣頁面的並不適應，這裏就要配合上面的方法，再改下user-agent，便可實現相似chrome的調試功能。

3.Firefox OS 模擬器

安裝的方法 參考這裏：https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8#Installing

安裝完成後可打開以下界面，可用裏面的瀏覽器打開網站便可，但這種方法打開的是電腦網站，而不是手機網站，也就是他的user-agent不是手機的，故對響應式界面起做用，對判斷user-agent的網站不起做用，訪問qq，baidu等返回的都是電腦界面。

 

Opera*

1.修改user-agent

和chrome和firefox相似，可自行安裝插件，自opera12以後，opera改用webkit內核，故可安裝chrome的插件，也可自行在opera的商店中搜索插件

User Agent Changer下載： https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en

2.Opera Mobile Emulator + dragonfly*

下載適合本身的版本，meng.115sou.com安裝完畢會開以下界面：

左側選擇平臺，右側選擇參數，選擇完畢點擊啓動，以下的幾面，用過手機opera的朋友會很熟悉，就是手機opera

關於opera mobile emulator的更詳細介紹參看文章末尾參考資料的相關內容。

但此時，仍是隻能看而已，不能調試模擬器裏的網站，這裏須要dragonfly配合以實現調試，因爲opera12後換了內核，不能安裝dragonfly了，全部你須要一款opera12的瀏覽器，和dragonfly的離線包，配置好後具體如何鏈接請參看這裏http://www.opera.com/dragonfly/documentation/remote/

所有設置好後便可實如今電腦上調試手機網頁，以下圖所示：

opera12下載地址：http://yanhaijing.7958.com/down_10918696.html

dragonfly中文離線包下載地址：http://yanhaijing.7958.com/down_10918700.html

opera mobile emulator下載地址：http://www.opera.com/zh-cn/developer/mobile-emulator

模擬器*

1.官方模擬器*

作安卓開發的確定都知道安卓模擬器，這是谷歌官方的提供的開發環境，能模擬安卓環境，還可切換各個版本，可下載配置好的環境，而後打開eclipes，直接打開AVDM，穿件一個AVD，而後start，以下圖：

要等一大會時間，會打開模擬器，和安卓環境同樣，打開裏面的瀏覽器測試便可。但個人瀏覽器打不開不知道爲何，鬱悶的很啊。

 

下載地址：http://developer.android.com/sdk/index.html

2.bluestacks

這也是一款模擬器，可自行搜索，本人安裝後電腦就卡死了，可能個人電腦配置不行吧，看介紹仍是不錯的。

在線測試

在線只能測試界面的視覺效果，不能調試，但也是很不錯的。

1.Mobile Emulator*

很是不錯，速度也很快，界面很簡潔，支持多種平臺。

http://emulator.mobilewebsitesubmit.com/

2.opera mini simulator

須要java環境支持，單一平臺，opera出品，速度很快。

http://www.opera.com/zh-cn/developer/opera-mini-simulator

3.webpage mobile

說實話弄了半天也沒弄出來，大大的鄙視下吧，可是能測試的平臺很全面。

http://www.webpagetest.org/mobile

總結

以上列出了多種方法，各有利弊，但願你們選擇適合本身的方法，本人推薦chrome自帶模擬器和opera mobile emulator + dragonfly的方法。由於這兩種方法，接近真是手機環境，又能調試css和js。

固然文中沒有提到的還有最好的方法就是你有一臺手機，那就太好了，配合遠程調試，是最最理想的辦法。

推薦

Q羣 GitHub家園 225932282 git/github知識共享，經驗交流，開源項目，資料下載，賬號互粉 歡迎加入

參考資料

*Chrome模擬手機瀏覽器（iOS/Android）的三種方法，親測無誤！：http://www.ihacksoft.com/chrome-simulate-ios-android-browse.html

 用谷歌瀏覽器來當手機模擬器：http://blog.s135.com/chrome_phone/

*關於手機網站測試的問題：http://segmentfault.com/q/1010000000143811

如何firefox模擬手機訪問手機網站：http://blog.sina.com.cn/s/blog_645813a30100qf68.html

*Firefox OS 模擬器：https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8

*Opera Mobile Emulator for desktop：http://dev.opera.com/articles/view/opera-mobile-emulator/

設置 Opera Dragonfly 爲離線版或實驗版的方法：http://opera.im/archives/running%EF%BC%8Ddragonfly-offline-or-experimental-version/

*整理：手機端網頁調試方案：http://blog.segmentfault.com/humphry/1190000000313211?page=1

*移動終端開發必備知識：http://isux.tencent.com/mobile-development-essential-knowledge.html/zh-hans