如何在電腦上除錯手機網站

admin發表於2017-02-22
除錯網站
當然手機網站幾乎可以說普及，在某些型別網站中，使用率甚至超過了電腦網站。

所以開發手機網站已經是前端程式設計師必須要掌握的技能，當然一個實用的手機網站一定要各種型別的真機測試，但是在開發階段，如果能夠利用電腦測試手機網站，那麼開發效率將會提高很多，下面就介紹一下如何在電腦上測試手機網站。

一.安卓手機的除錯:

1.最常見的安卓手機的除錯方法是用chrome瀏覽器調節，既方便有簡單。（chrome的版本要在v20.0以上）

按F12,調出程式碼偵錯程式，如下圖:

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/204958t0phd2cc6hfeazg9.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以讓程式碼偵錯程式左右結構顯示

按照下面畫紅色圈圈的地方進行操作，如下圖:

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205026g444wp14xa3j5j26.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到有很多裝置可以選擇:

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205105z5ptly38jqxljjv5.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

選擇Emulate就可以對您的網站進行模擬除錯了。

2.安裝安卓虛擬機器，這種方式可以模擬真機，效果更好一些.

方法如下： 地址http://www.genymotion.cn/ 開啟上面的地址，註冊下載。

安裝方法參見：http://www.genymotion.cn/#theme=guide

安裝好了以後，有時候不能安裝軟體，需要破解，下面寫寫破解步驟。

第一步：裝個ARM轉換器 Genymotion-ARM-Translation

地址： http://goo.gl/tfjjMt

第二步： 裝個Google Apps ，http://goo.im/gapps

把這兩個檔案拖進虛擬機器就可以了

注意：對應版本要下載好，不然不好用。

安裝好了，執行之後如下圖：

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205133x3f9m6awti96amqz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.蘋果手機的除錯方法:

對於蘋果手機的除錯，要想在電腦上進行，那必須要用蘋果電腦（Mac）了。

Mac 版的 Safari 瀏覽器早就可以連線 iPhone 進行測試了，可以看這裡：通過Mac遠端除錯iPhone/iPad上的網頁。

也就是說，將iPhone連線Mac之後在iPhone的Safari開啟網頁，然後再開啟 Mac 上的 Safari 瀏覽器，選擇“開發”就可以看到你的 iPhone 上面的網頁了，然後會開啟 Console 這樣的工具。就可以進行各種除錯和檢查，操作會實時改變在 iPhone 上。 這裡如果沒有 iPhone 或者覺得 iPhone 連線麻煩，其實也可以使用 Xcode 開發套裝中的 iPhone 模擬器。

開啟Xcode之後，在"Xcode"->"Open Developer Tool"->"iOS Simulator" 即可開啟一個 iPhone 模擬器。

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205210ruxgj6qzbfzw5jux.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這個模擬器幾乎跟真實環境一致，還可以設定 iOS 的裝置型號等。在模擬器中 Safari 開啟的網頁，也可以被 Safari 檢測到並進行除錯,這樣就方便多了，不需要來回插拔資料線，同時還可以方便對照設計稿進行細節調整等。

相關文章