手機網站調試神器之chrome控制台

標籤：

現在真是一個資訊化的時代，每個人手裡都拿著一款智能機，上班下班走路坐車之餘都會玩玩手機，上上網。於是作為廣大網站媒體來說，爭搶手機市場無疑是刻不容緩。對於我們Web前端工程師來說，瞭解並掌握手機編程的任務也是刻不容緩。下面為大家推薦一款比較不錯的手機調試軟體chrome。

　　經常調試手機網站的碼農們，一定會為手機調試軟體而發愁，找不到比較合適的手機網站調試工具。我也是無意中發現chrome控制台的軟體佈建中就具備了各種手機螢幕的尺寸。我們只要用它就很方便完成調試工作了。

　　下面介紹一下chrome調試的方法。

　　1、開啟chrome(下面的步驟如果不成功，請先升級chrome瀏覽器)

　　2、按F12開啟Developer Tools,之後點擊developer Tools右下角的設定icon,(圖1-1)

 

圖1-1

 

　　3、點擊設定icon後，就會看到彈出一個新的介面，如(圖1-2):

 

圖1-2

 

　　4、在所示介面點擊相應選項，重新整理頁面就能看到chrome使用對應裝置上的相應瀏覽器渲染該頁面，(圖1-3)展示了chrome可以類比的裝置：

 

圖1-3

　　5、下面講下該工具每個功能項的意思

　　User Agent : 設定使用者代理程式，告訴瀏覽器類比何種裝置中的哪個瀏覽器

　　Device metrices: 選擇後，會根據User Agent設定頁面的大小，預設值是類比設定的大小，

　　Fit in window ：點選後，頁面大小會根據視窗大小進行適配

　　Override Geolocation：手動設定經緯度，選擇後可以輸入經度和緯度的值 Emulate position unavailable用來開關是否可以使用地理位置

　　Override Device Orientation：設定裝置方向，

　　Emulate touch events：類比觸控螢幕事件

　　Emulate CSS media：類比css 樣式螢幕如 print screen tv等

　　儘管市面上有眾多的手機網站調試工具，但是普遍都得需要下載安裝，使用起來非常麻煩。而chrome內建的功能就可以滿足我們普遍手機網站調試人員的需求，何樂而不為呢。

手機網站調試神器之chrome控制台