webapp網頁調試工具Chrome Devtools

前言

css3說太多了，會顯得文章顯得千篇一概：介紹，介紹~demo，完結，而後就沒有而後了。因此時不時插一篇扯蛋的玩意，起碼還能夠調節一下胃口，鹹的辣的哪一個喜歡就拿克（去）。

以前想要測試手機demo的時候都要先把電腦屏幕拉窄，而後用自適應的辦法來搗騰，可是咱們都這樣作其實並非符合手機屏幕標準的。如今的智能手機都是以每英寸包含有多少像素點來衡量屏幕清晰度，而不是像PC端的屏幕清晰度都是以像素點來做爲基準，所以假如總是按照拉窄屏幕來試圖獲取手機上顯示效果顯然不全對。

固然，做爲一個非智能設備研究者，咱們沒發能像他們知道這些點到底是經過什麼高科技工業技術得來，咱們只關心的是：假如射擊溼給咱們一張移動手機PSD稿，當咱們寫完頁面的時能快速的調試咱們所寫的頁面是否能較爲完美地還原設計稿。

因此，來學習一下Chrome DevTools之webapp調試界面是很是有必要的，你說呢？

Chrome devtools初識

最近更新Chrome到了40.Dev版本，打開網頁按F12以後驚喜的發現原來調試工具備了新的改變，默認在底部的調試工具調整到右側。對於大屏顯示器的童鞋來講這個用起來應該會很舒服，可是小屏幕的同窗就會很糾結了，假如你想要在底部顯示那麼仍是按照老辦法：長按倒數第二個按鈕，就可讓調試工具橫屏或者側屏切換。

今天咱們的豬腳是webapp調試，因此各類什麼的都直接pass掉，直接點擊手機小圖標進入到webapp調試界面

在這裏，咱們能夠看見了和PC端不同的調試界面，首先是調試界面的背景發生了改變，不是PC端的白色背景，取代的是由像素點組成的深色背景。

一、device：各類手機設備，從手機→平板→閱讀器，包括最新的iPhone6和6+。

你想要預覽你的手機頁在iPhone6上顯示什麼效果，直接選擇iPhone6設備便可，無需再手動拉窄屏幕。

二、Network：網絡環境。你能夠模擬你的手機端頁面在各類網絡環境下的渲染速度

默認爲nothing，也就是咱們使用的本地網絡。第一個選項爲office辦公環境，選中以後刷新頁面才能夠在辦公環境網絡下渲染頁面，可是我這裏測試以後出現錯誤信息~~。

PS:offline~~我竟然當作了office，offline是離線的意思，多謝@姬小光 同窗，看來沒有仔細看英文的後果，又對不起本身和你們了。

下面的幾個都是咱們都是咱們熟悉的網絡環境，從PGRS到WIFI，咱們注意到每一個名稱後面都有一個括號括起來2個數值GPRS（50kbps 500ms RTT），第一個數值是最大下載值，第二個是網絡延遲

如何定義網絡延遲程度：
（網絡延遲PING值越低速度越快）
1~30ms：極快，幾乎察覺不出有延遲，玩任何遊戲速度都特別順暢;
31~50ms：良好，能夠正常遊戲，沒有明顯的延遲狀況;
51~100ms：普通，對抗類遊戲能感受出明顯延遲，稍有停頓;
>100ms：差，沒法正常遊戲，有卡頓，丟包並掉線現象;
計算方法：1秒=1000毫秒（例：30ms爲0.03秒）

這個網絡環境我的以爲假如你的網站定位於三四線城市的話，那應該要好好測試，畢竟相對沿海一線城市，內地地區的網絡會稍偏慢點。假如說你的wap網站用GPRS的網絡渲染起來很慢的話，那估計還要前端各類優化方可上線，否則估計怕當地的網民一會兒登不上你的網站的話會不想等待直接關閉，因此我的感受network環境仍是很是重要的。

有興趣的朋友可使用手機淘寶網http://m.taobao.com，騰訊手機網http://info.3g.qq.com/來在各類環境下測試一下，就會知道其中的延遲區別了。

三、分辨率，在這裏你能夠看見你的分辨率設備獨立像素，假如勾選前面這個按鈕，那麼顯示效果就會根據你設定的分辨率顯示，固然你選擇iPhone5移動設備的話，那麼這裏的分辨率就會按照對應的320*568設備獨立分辨率來顯示。

四、device pixel ratio，這裏是是設備像素比，對於設備像素比的解釋以下：

The Window.devicePixelRatio read-only property returns the ratio between physical pixels and device independent pixels in the current display.

翻譯爲咱們熟悉的中文大概意思是：物理像素和設備的獨立像素的比例

說得很拗口，devicePixelRatio 這個東東其實就是一個比值。第一幅圖中，iPhone5的目前物理像素（即分辨率）是640*1136，但此時這款設備獨立像素320*568，所以，當前物理像素/設備獨立像素 = 2，也就是圖中的編號4中的2

對因而否爲高清顯示屏，能夠來查看下前端觀察以前發佈的一張圖

圖中超過240dpi以上的都是高清顯示屏，也就是retina顯示屏。

對於還不懂的童鞋請移步一下鑫哥和前端觀察的兩篇文章：設備像素比devicePixelRatio簡單介紹 和 移動端webapp開發必備知識

五、fit，變焦修復可用空間

六、UA，就是移動設備的操做系統，好比iPhone5的UA處就顯示了Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53 括號中顯示了iphone5的操做系統是IOS7，Safari的版本號位9527.53版本號。因此假如你選擇iPhone5設備來調試頁面，該設備上的各類移動瀏覽器版本可能爲以上者幾種版本號。

七、-0.5+，假如是常常寫移動端的頁面的同行一看就明白了大概是怎麼回事，淘寶此處的含義其實就是對應如下代碼中的o.5，其實就是視圖比例

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

這段話就是控制這個顯示比例，這段代碼表示默認顯示比例爲0.5，最大比例0.5，最小比例0.5，user-scalable是否容許用戶縮放，yes表示能夠，no表示不能夠。固然有時候你也會看見這樣一段代碼

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">

此處width等於視窗的寬度，最大比例和最小比例都是1，也就是說用手機瀏覽的時候跟電腦顯示是沒有卻別，好比說一個50*50的圖標在移動設備中也是顯示50*50，這裏我瞭解的是這樣：只是顯示效果同樣，可是在移動設備看的時候就會有顆粒感

iPhone圖標web和pc端對比

手機黨的用戶↓

可是假如咱們用默認爲0.5的像素比來規定的話，那麼其實出來的效果是這樣

iPhone圖標像素比爲0.5

手機黨的用戶↓

前一個demo和後一個demo的圖片我作了一個比較以下：

其實咱們不妨能夠猜測一下，對於width=device-width，最大比例和最小比例都爲1實際上是爲網頁自適應而準備，而默認都是爲0.5是爲webapp準備的呢？由於從4s開始屏幕上面的一個點就是等於4個像素點，引用喬幫主的圖

由於對移動設備研究不深，因此有知道的朋友麻煩告知一下，謝謝了。

八、…，固然假如說Google Devtools只是提供這麼一套webapp調試工具給咱們就已經足以甩開天朝亂七八糟瀏覽器開發商。不但提供了不少設備的調試，這點firefox也比不上，由於firefox只是提供了一個自適應頁面調試工具，這跟webapp調試是兩碼事，而且chrome devtools還提供了diy功能，你能夠選擇你本身的設備而後進行保存，點擊8中的…進入到devtools的diy功能

只有把須要設置的各類參數通通設置好以後，直接點擊圖片中的save as按鈕就能夠直接保存，接着填上本身的自定義名稱便可，以後該設置會在1中也就是device中會顯示出來。

結語

彷佛沒有要說什麼了，只是一個很簡單的webapp調試工具，固然假如你要模擬各類網絡進行渲染的話，那估計寫10篇都寫不完，就此打住。對於webapp據說也是水很深，一張圖能夠引起無數個話題出來，這就有點相似標籤語義化的做用是什麼這個奇葩的問題。

晚安，各位同行

 

參考資料：
https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio

本文地址：http://xiaoho.com/?p=850