webapp网页调试工具Chrome Devtools前端观察

前言

css3说太多了，会显得文章显得千篇一律：介绍，介绍~demo，完结，然后就没有然后了。所以时不时插一篇扯蛋的玩意，起码还可以调节一下胃口，咸的辣的哪个喜欢就拿克（去）。

之前想要测试手机demo的时候都要先把电脑屏幕拉窄，然后用自适应的办法来捣腾，但是我们都这样做其实并不是符合手机屏幕标准的。现在的智能手机都是以每英寸包含有多少像素点来衡量屏幕清晰度，而不是像PC端的屏幕清晰度都是以像素点来作为基准，因此假如老是按照拉窄屏幕来试图获取手机上显示效果显然不全对。

当然，作为一个非智能设备研究者，我们没发能像他们知道这些点究竟是通过什么高科技工业技术得来，我们只关心的是：假如射击湿给我们一张移动手机PSD稿，当我们写完页面的时能快速的调试我们所写的页面是否能较为完美地还原设计稿。

所以，来学习一下Chrome DevTools之webapp调试界面是非常有必要的，你说呢？

Chrome devtools初识

最近更新Chrome到了40.Dev版本，打开网页按F12之后惊喜的发现原来调试工具有了新的改变，默认在底部的调试工具调整到右侧。对于大屏显示器的童鞋来说这个用起来应该会很舒服，但是小屏幕的同学就会很纠结了，假如你想要在底部显示那么还是按照老办法：长按倒数第二个按钮，就可以让调试工具横屏或者侧屏切换。

今天我们的猪脚是webapp调试，所以各种什么的都直接pass掉，直接点击手机小图标进入到webapp调试界面

在这里，我们可以看见了和PC端不一样的调试界面，首先是调试界面的背景发生了改变，不是PC端的白色背景，取代的是由像素点组成的深色背景。

1、device：各种手机设备，从手机→平板→阅读器，包括最新的iPhone6和6+。

你想要预览你的手机页在iPhone6上显示什么效果，直接选择iPhone6设备即可，无需再手动拉窄屏幕。

2、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/来在各种环境下测试一下，就会知道其中的延迟区别了。

3、分辨率，在这里你可以看见你的分辨率设备独立像素，假如勾选前面这个按钮，那么显示效果就会根据你设定的分辨率显示，当然你选择iPhone5移动设备的话，那么这里的分辨率就会按照对应的320*568设备独立分辨率来显示。

4、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开发必备知识

5、fit，变焦修复可用空间

6、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设备来调试页面，该设备上的各种移动浏览器版本可能为以上者几种版本号。

7、-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个像素点，引用乔帮主的图

因为对移动设备研究不深，所以有知道的朋友麻烦告知一下，谢谢了。

8、…，当然假如说Google Devtools只是提供这么一套webapp调试工具给我们就已经足以甩开天朝乱七八糟浏览器开发商。不但提供了很多设备的调试，这点firefox也比不上，因为firefox只是提供了一个自适应页面调试工具，这跟webapp调试是两码事，并且chrome devtools还提供了diy功能，你可以选择你自己的设备然后进行保存，点击8中的…进入到devtools的diy功能

只有把需要设置的各种参数统统设置好之后，直接点击图片中的save as按钮就可以直接保存，接着填上自己的自定义名称即可，之后该设置会在1中也就是device中会显示出来。

结语

似乎没有要说什么了，只是一个很简单的webapp调试工具，当然假如你要模拟各种网络进行渲染的话，那估计写10篇都写不完，就此打住。对于webapp听说也是水很深，一张图可以引发无数个话题出来，这就有点类似标签语义化的作用是什么这个奇葩的问题。

晚安，各位同行

参考资料：
http://www.qianduan.net/https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio

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