在線模擬 瀏覽器電腦技術提升篇( 二 )


3.Firefox OS 模擬器
安裝的方法 參考這里:
安裝完成后可打開如下界面 , 可用里面的瀏覽器打開網站即可 , 但這種方法打開的是電腦網站 , 而不是手機網站 , 也就是他的user-agent不是手機的 , 故對響應式界面起作用 , 對判斷user-agent的網站不起作用 , 訪問qq , baidu等返回的都是電腦界面 。

在線模擬 瀏覽器電腦技術提升篇

文章插圖

三、Opera*瀏覽1.修改user-agent
和chrome和firefox類似 , 可自行安裝插件 , 自opera12之后 , opera改用webkit內核 , 故可安裝chrome的插件 , 也可自行在opera的商店中搜索插件
User Agent Changer下載:
2.Opera Mobile Emulator + dragonfly*
下載適合自己的版本 , 安裝完畢會開如下界面:
在線模擬 瀏覽器電腦技術提升篇

文章插圖

左側選擇平臺 , 右側選擇參數 , 選擇完畢點擊啟動 , 如下的幾面 , 用過手機opera的朋友會很熟悉 , 就是手機opera
在線模擬 瀏覽器電腦技術提升篇

文章插圖

關于opera mobile emulator的更詳細介紹參看文章末尾參考資料的相關內容 。
但此時 , 還是只能看而已 , 不能調試模擬器里的網站 , 這里需要dragonfly配合以實現調試 , 由于opera12后換了內核 , 不能安裝dragonfly了 , 所有你需要一款opera12的瀏覽器 , 和dragonfly的離線包 , 配置好后具體如何連接請參看這里
全部設置好后即可實現在電腦上調試手機網頁 , 如下圖所示:
在線模擬 瀏覽器電腦技術提升篇

文章插圖

opera mobile emulator下載地址:
四、模擬器*
1.官方模擬器*
做安卓開發的肯定都知道安卓模擬器 , 這是谷歌官方的提供的開發環境 , 能模擬安卓環境 , 還可切換各個版本 , 可下載配置好的環境 , 然后打開eclipes , 直接打開AVDM , 穿件一個AVD , 然后start , 如下圖:
在線模擬 瀏覽器電腦技術提升篇

文章插圖

要等一大會時間 , 會打開模擬器 , 和安卓環境一樣 , 打開里面的瀏覽器測試即可 。 但我的瀏覽器打不開不知道為什么 , 郁悶的很啊 。
在線模擬 瀏覽器電腦技術提升篇

文章插圖

下載地址:
2.bluestacks
這也是一款模擬器 , 可自行搜索 , 本人安裝后電腦就卡死了 , 可能我的電腦配置不行吧 , 看介紹還是不錯的 。
五、在線測試
在線只能測試界面的視覺效果 , 不能調試 , 但也是很不錯的 。
1.Mobile Emulator*
非常不錯 , 速度也很快 , 界面很簡潔 , 支持多種平臺 。
在線模擬 瀏覽器電腦技術提升篇

文章插圖

2.opera mini simulator
需要java環境支持 , 單一平臺 , opera出品 , 速度很快 。
3.webpage mobile
說實話弄了半天也沒弄出來 , 大大的鄙視下吧 , 但是能測試的平臺很全面 。
六、總結
以上列出了多種方法 , 各有利弊 , 希望大家選擇適合自己的方法 , 本人推薦chrome自帶模擬器和opera mobile emulator + dragonfly的方法 。 因為這兩種方法 , 接近真是手機環境 , 又能調試css和js 。
當然文中沒有提到的還有最好的方法就是你有一臺手機 , 那就太好了 , 配合遠程調試 , 是最最理想的辦法 。
【在線模擬 瀏覽器電腦技術提升篇】以上內容就是關于在線模擬 瀏覽器電腦技術提升篇的詳細內容 , 更過關于電腦系統百科的教程請關注我們!

推薦閱讀