四月28
手機瀏覽模擬器:Chrome瀏覽器內建功能

Chrome手機模擬器04不得不承認 Google在某些方面真的很用心,雖然Google不太宣傳自己,但Google的產品真的時常藏著一些驚喜,前些日子因為要處理WordPress架設的網站不適合用在行動裝置瀏覽的問題,所以找了一下【手機瀏覽模擬器】,結果大家都推薦這款Google出的Chrome瀏覽器,因為Chrome內建的除錯功能就包含有【手機瀏覽模擬器】,真是省了工作熊非常多的麻煩。

使用這個Chrome內建的除錯功能也可以幫我們檢查Analytics追蹤程式碼,或是AdSense廣告程式碼使否有被安裝到手機板的版型中,可以即時提醒我們要把程式碼安裝到適當位置。對版型維護及程式設計師來說可是個方常好用的工具。

現在我們就來看看如何啟動Chrome的除錯功能與手機瀏覽模擬器吧!

步驟一、叫出Chrome的除錯程式

打開Chrome瀏覽器,然後在瀏覽器的右上角點擊有三條短橫槓(自訂及管理)的地方,打開功能表後,點擊【更多工具】,接著再點擊【開發人員工具】。其實有快捷鍵【Ctrl+Shift+I】可以直接叫出除錯程式,但是記不太住。Chrome手機模擬器01

步驟二、開啟手機瀏覽模擬器

在畫面的上方中間處的放大鏡右邊有個「手機」的圖示,點擊這個圖示一次可以切換到手機模式,再點一次會回到電腦桌面模式,不過切換後可能得按一下【F5】鍵盤按鍵,讓瀏覽器重新整理一下,才會真的切換過來。

在Chrome瀏覽器左上方的地方有個【Device】 可以選擇適合的手機機型。

Chrome手機模擬器02

步驟三、新增手機型號與解析度及螢幕大小

如果沒有發現自己想開發的手機型號,也可以在Chrome瀏覽器的右上角,點擊齒輪的「設定」圖示,然後按【Devices】,再按【Add customer device…】來新增機型號與解析度及螢幕大小。

Chrome手機模擬器03

後記:

Chrome的這個除錯程式及手機模擬器真的非常好用,工作熊經在Firefox瀏覽器也經常使用Firebug除錯程式外掛來偵錯版型小修改時的CSS問題,這兩款都支援即時修改版型且即時顯示修改後的畫面,真的超推薦的。


延伸閱讀:
使用Google搜尋趨勢,尋找熱門關鍵字並決定文章標題
使用第三方網站流量查詢工具(SimilarWeb),驗證網站流量是否灌水
解決Chrome安裝後不能執行的問題,設定Windows7的EMET


本部落格提供免費電子書索取:
我如何開始寫部落格 寫部落格賺錢術 如何提昇部落格人氣

手機瀏覽模擬器:Chrome瀏覽器內建功能 有 1 則回應

  1. 這個功能真好用耶,感謝介紹!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *