通过移动端使用 Web 服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到 。由此可见，掌握移动端的前端开发和测试是非常有必要的。

由于之前做过大量有响应式需求的项目；今年（2014）年初也配合 Denis 的做了一些用于微信的移动端项目；在淘宝 UED 实习的时候，也有参与过一个针对移动端的游戏的部分开发。所以算是积累了一点移动端调试的经验，在这里分享一下。

本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐 Mars 移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它“太监”了。

响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。

响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用 max-width 才行，如果使用 max-device-width 则会根据你设备的屏幕尺寸来判断。区别详情请看。

对于 Chrome 浏览器，你可以将 Chrome DevTools 放在右边，这种布局方式尤其适合用在外接的大屏幕上。然后通过拖动 DevTools 快速测试响应式的显示效果：

优点就是对于 Chrome 开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对 Media Queries 的临界值效果不好测试。

对于 Firefox 浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过 Firefox 工具 -》Web 开发者 -》自适应设计视图 启用：

可以设置分辨率等参数，以及模拟 touch 事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐 Firefox 浏览器。

由于响应式测试太简单，于是有了一大堆的书签栏 JS 工具或者 Chrome 扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。

如果你需要测试某种明确的机型，Chrome 新版的 Emulation 就可以派上用场了。Emulation 现在变成了一个手机图标（），之前的 Emulation 面板被放在了 DevTools 的分裂视图中了，如果你怀念以前的 Emulation 面板或者需要模拟地理位置、加速计等功能，在 DevTools 界面摁下 ESC 即可打开分裂视图。打开 DevTools 之后，点击这个“手机图标”即可进入 Chrome 手机模拟器：

在 Device 你可以选择预置的设备，快速切换分辨率和屏幕有关参数。此外还可以设置分辨率比率，来模拟 Retina 或者更高级屏幕下的效果，这样可以测试你的响应式图片是否被正确替换等。它甚至提供了网络测试，来测试低网速情况下你的页面加载情况。慢网速的测试，往往需要用抓包工具（Charles 等）来模拟，现在用 Chrome 也可以模拟了。

除此之外，Chrome 的手机模拟器还提供了非常非常多的实用功能，比如模拟 touch 事件、捏等手势操作、地理位置、加速计、Retina 等等，详情请见，英文不好的朋友可以看我的。节约篇幅，这里不再赘述。

这里的方法仅能作为基础的响应式测试，对于中小型、比较简单的项目，完全足够用了，对于稍微复杂的页面，还是需要用虚拟机或者真机测试，这样更加可靠。

基于 Android 的移动端前端开发调试

Android 系统是份额最大的移动端设备操作系统。一方面，Android 是 Google 开发的，浏览器等也是基于 Blink 内核（早期版本基于 Webkit ），都是 Google 开发的，所以技术上应该是没有问题的。另一方面，Google 无偿开源 Android 系统，结果导致很多小厂商自己乱改 Android 系统，各种版本遍地生花，各种 BUG 层出不穷。

在电脑上安装 Android 虚拟机，就可以用虚拟机打开进行测试。一般推荐两个：

是一个很棒的 Android 虚拟机。但是首次安装配置需要麻烦一些。由于基于内核，所以要先安装 VirtualBox，然后需要注册账号 Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是 OK 的。

安装完成，登陆之后，选择 Android 版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。

安装好的虚拟机与你 Host 本机处于一个局域网，这样你就可以用 BrowserSync 之类的，开启一个局域网 IP 本地服务器，在移动设备上同步测试了。关于 BrowserSync，如果你没接触过，下面有讲。

比较蛋疼的是，Genymotion 虚拟机里面安装 APP 好像比较麻烦，安装 Chrome 不太方便，这样不方便连接桌面版 Chrome 进行调试，只能使用 Weinre 调试。如果你有 Genymotion 使用这方面的经验欢迎分享。

是基于 Mac 平台的虚拟机，使用它创建虚拟机的时候，可以直接下载 Android 系统并安装，超级傻瓜的操作，但是超级好用。

没错，它还可以装 Chrome OS，只需要点击一下等待下载即可。

其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win 系统可以直接安装 Android SDK 也可以通过虚拟机方式，这里不再赘述。

安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网 IP 来调试本地页面。

虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。

桌面端的前端开发调试非常简单，因为有 Firebug、Chrome DevTools 等工具，直接右击打开就可以看到元素的 CSS，并且可以查看各种资源、修改运行调错 JS 等。而移动端浏览器显然没法带有这些功能，于是可以用数据线连接设备，然后用电脑上的 Chrome DevTools 来调试移动设备上的页面。

首先，你的 Chrome 版本必须高于 32。其次你的测试机 Android 系统高于 /dev/client/#AwAj 这样的链接，打开即可调试，非常方便，就是有些卡。

除此之外，它还提供了很多方便调试的功能，有兴趣的朋友可以看下 官方网站的介绍 和 Debugging web content on iOS。感觉就是丑了一些，如果能请设计师或者交互设计一下，会好得多。

移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。

例如用不同的设备访问你的网站，并截图：

甚至可以让你远程控制一台机器，进行测试操作：

BrowserStack 就提供这种服务，它可以实时在线调试，也可以 截屏、测试响应式 等等。

此外 Keynote 也提供这种服务，当然这里的 Keynote 不是 Mac 上的幻灯片 APP。它提供更加真实的 Mobile 测试，我简单的试了一下，果然比较卡，应该是真机测试：

其他移动端调试方法和技巧

BrowserSync 是我最爱的多终端测试工具。在没有使用这个BrowserSync 之前的原始的测试流程一般是这样的：

先把本地的网页上传到远程服务器（因为好多设备都要去访问一个固定的地址），然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等，生成二维码扫一下）。然后手机开始下载页面，需要等待下载。观看效果进行测试，每个测试机都要操作一遍。测试其他网页的时候，每个测试机重新输入网址、刷新。如果代码有修改，需要重新上传服务器进行刷新。

而 BrowserSync 这个工具，可以用你局域网 IP 创建一个本地服务器，生成一个类似 。这样我们访问本地服务器时使用 ，才可以正常使用 登陆 等等服务（需要用到 Cookie）。

那我们用移动端设备测试这个页面的时候，也需要修改移动端设备上的 Host。因此 Android 需要 root，iPhone 需要越狱，而且每次都要开启，极为不方便。这时候，我们就可以使用 Charles 这里抓包工具做一个代理。

当打开 Charles 时，它会自动在本机开启一个代理服务，默认接口为 8888。这时候，我们设置同局域网内的移动设备的代理为本机局域网 IP，即可通过 Charles 转发请求，在移动设备上访问电脑可以访问的内容。基本原理如下图：

通过这个代理服务，移动设备的请求被转移到到电脑上发送出去，并将电脑得到的响应返回给移动设备。其他同类问题（想用手机访问只有电脑才能访问的内容）均可用这种方式解决。此外，因为经过 Charles 代理，因此可以使用 Charles 的查看有关请求和响应、做本地资源映射等等功能，来简化开发和调试 BUG。

启用方法详情请见： 中的 截取iPhone上的网络封包 一节，这里不再赘述。

提供一个 Charles 的小技巧：Charles 只提供了全局监听和 Firefox 监听，但我常用的是 Chrome 浏览器，我只想监听 Chrome 浏览器中某个页面的请求信息，也可以通过设置代理来解决。这里使用 SwitchySharp 代理插件（GAE 翻墙必备），增加一个新的情景模式，绑定本地 Charles 代理。

关于 Charles 的使用，可以自行搜索教程，Fiddler 同样原理，不再赘述。

移动端前端重构项目开发流程最佳实践

新建项目相关文件，然后应用 BrowserSync 等工具（可以配合 Grunt 等）启动本地服务器。在 Chrome 中启用 Emulation 来模拟 iPhone 等设备的尺寸，进行编码开发。这样就可以无刷新、比较直观的看到手机上的效果。

开发基本完成，将测试机、虚拟机等打开联入局域网，输入本地服务器地址，开始测试。对文件的修改实时刷新在所有设备中，即时看到效果。

对于有点复杂的 BUG 或者问题，使用 Safari 或者 Chrome 连接虚拟机或者真机进行调试。

不同测试场景下需要用到的技术和工具

低版本系统和其他品牌手机以及 WebView：统统可以用 Weinre 来解决。

使用 BrowserSync 可以创建本地局域网 IP 服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。

当移动端设备无法访问某项资源时，使用 Charles 做代理，通过电脑去访问。

• 每家运营商的DNS都不同，而且各省的也不同。你可以问问你的网络提供商，他们会告诉你的。（也可以通过分别访问域名和IP来检查DNS是否正常，访问域名不行，而访问IP可以，则说明DNS设置不对） 另外，如果ADSL-电脑没问题，一般ADSL-路由器也没问题的。而且采用ADSL拨号的话，DNS可以不设置的，拨号成功后会自动取得DNS服务器。 问题可能出在路由器设置上。进去检查一下吧。看看上网方式，上网用户名密码是否正确。 （有个问题要注意一下，有些地方的运营商会限制使用路由器或者限制接入数量，一般是采取绑定网卡MAC地址的方式，如果路由器设置都正常，试试路由器的MAC地址克隆功能，把电脑网卡的MAC复制过去）

• 目前我们的生活水平必竟非同以往．吃得好休息得好，能量消耗慢，食欲比较旺盛，活动又少，不知不觉脂肪堆积开始胖啦。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　减肥诀窍：一．注意调整生活习惯，二。科学合理饮食结构，三。坚持不懈适量运动。 　　　具体说来：不要暴饮暴食。宜细嚼慢咽。忌辛辣油腻，清淡为好。多喝水，多吃脆平果青香焦，芹菜，冬瓜，黄瓜，罗卜，番茄，既助减肥，又益养颜，两全其美！ 有减肥史或顽固型症状则需经药物治疗． 如有其他问题，请发电子邮件:jiaoaozihao53@ .或新浪QQ: 1

• 如何洗衣服？也许有人会说，衣服谁不会洗啊？放到水里，加点洗衣粉洗就成了呗。是啊，说是这样说，可是洗衣服还有不少学问呢。我就说说我的“洗衣经”吧。 说起洗衣服，想想真有不少要说的呢。 首先要分开洗。内衣外衣、深色浅色要分开。个人和个人的衣物也尽量分开洗涤，这样可以防止不同人体间细菌和病菌的相互交叉感染，尤其是宿舍或者朋友的衣服尽量不要放置在一起洗。即使是自己的衣服，内衣和外衣也要分开洗。因为外衣接触外界的污染和尘土较多，而内衣将直接接触皮肤，为避免外界尘螨等对皮肤的不良入侵，内外分开洗涤是有科学道理的。不同颜色的衣物要分开洗涤，可将颜色相近的一同洗涤，浅色的一起洗涤，容易掉色的单独洗涤，避免衣物因脱色而损坏。另外，袜子和其他衣物不要一起洗涤。 其次，使用洗衣粉宜提浸泡一会。洗衣粉功效的发挥不同于肥皂，只有衣物适时浸泡才能发挥最大的洗涤效果。浸泡时间也不宜太长，一般20分钟左右。时间太长，洗涤效果也不好，而且衣物易褶皱。有人洗衣服时把洗衣粉直接撒在衣物上便开始搓揉洗涤，那样不能发挥最好的洗涤效果，对洗衣粉是一种浪费，当然，免浸泡洗衣粉出外。另外，冬季一般宜使用温水浸泡衣物。水温过低，不能有效发挥洗衣粉的洗涤效果，水温太高，会破坏洗衣粉中的活性成分，也不利于洗涤。 再次，衣物及时更换，及时洗涤。衣服要及时更换，相信道理大家应该都很清楚。可是，衣物换下后应该及时清洗，有人却做的不好。好多家庭喜欢将换的衣服积攒起来，每周洗一次，这样很不科学，容易使衣物上积聚的细菌大量繁殖，容易诱发皮疹或皮肤瘙痒症状。为了个人和家人的身体健康，还是勤快一点，把及时换下的衣物及时洗涤，这样，其实也费不了多少时间，也不至于最后要花费半天甚至更长 的时间专门来洗涤大量的衣物要节约的多。另外衣服穿的太久就比较脏，要花很大的力气洗涤才能洗干净，也容易将衣物搓揉变形，而影响美观和穿着效果。 洗衣服是个简单的小家务，也是生活中不可缺少的一件事，学问却很多，也许您的“洗衣心得”比这还要科学，还要多样，欢迎您 的指正~~

• 要有经营场所，办理工商登记（办理卫生许可），如果觉得有必要还要到税务局买定额发票，不过奶茶店一般人家消费是不会要发票的巴，要买设备，要联系供应商备一些原料，就好啦，没啥难的，不过要赚钱的话就得选好开店地段。 办理手续的程序（申领个体执照）： 1、前往工商所申请办理 2、根据工商所通知（申请办理当场就会给你个小纸条）前往办理名称预核 3、拿到名称预核通知书，办理卫生许可证（前往所在地卫生监督所办理） 4、拿着名称预核通知书和卫生许可证前往工商所核发营业执照。

• 考虑是由于天气比较干燥和身体上火导致的，建议不要吃香辣和煎炸的食物，多喝水，多吃点水果，不能吃牛肉和海鱼。可以服用（穿心莲片，维生素b2和b6）。也可以服用一些中药，如清热解毒的。

• 确实没有偿还能力的，应当与贷款机构进行协商，宽展还款期间或者分期归还； 如果贷款机构起诉到法院胜诉之后，在履行期未履行法院判决，会申请法院强制执行； 法院在受理强制执行时，会依法查询贷款人名下的房产、车辆、证券和存款；贷款人名下没有可供执行的财产而又拒绝履行法院的生效判决，则有逾期还款等负面信息记录在个人的信用报告中并被限制高消费及出入境，甚至有可能会被司法拘留。

• 第一步：教育引导 不同年龄阶段的孩子“吮指癖”的原因不尽相同，但于力认为，如果没有什么异常的症状，应该以教育引导为首要方式，并注意经常帮孩子洗手，以防细菌入侵引起胃肠道感染。 第二步：转移注意力 比起严厉指责、打骂，转移注意力是一种明智的做法。比如，多让孩子进行动手游戏，让他双手都不得闲，或者用其他的玩具吸引他，还可以多带孩子出去游玩，让他在五彩缤纷的世界里获得知识，增长见识，逐渐忘记原来的坏习惯。对于小婴儿，还可以做个小布手套，或者用纱布缠住手指，直接防止他吃手。但是，不主张给孩子手指上“涂味”，比如黄连水、辣椒水等，以免影响孩子的胃口，黄连有清热解毒的功效，吃多了还可导致腹泻、呕吐。

• 合肥政务区网络广告推广网络推广哪家公司比较好 一套能在互联网上跑业务的系统，被网络营销专家赞为目前最 有效的网络推广方式！

• 1、搜索引擎营销：分两种SEO和PPC，即搜索引擎优化，是通过对网站结构、高质量的网站主题内容、丰富而有价值的相关性外部链接进行优化而使网站为用户及搜索引擎更加友好，以获得在搜索引擎上的优势排名为网站引入流量。

• 良工拥有十多位资深制冷维修工程师，十二年生产与制造经验，技术力量雄厚，配有先进的测试仪器，建有系列低温测试设备，备有充足的零部件，包括大量品牌的压缩机，冷凝器，蒸发器，水泵，膨胀阀等备品库，能为客户提供迅捷，优质的工业冷水机及模温机维修和保养。

• 楼主，龙德教育就挺好的，你可以去试试，我们家孩子一直在龙德教育补习的，我觉得还不错。

• 成人可以学爵士舞。不过对柔软度的拒绝比较大。　　不论跳什么舞，如果要跳得美，身体的柔软度必须要好，否则无法充分发挥出理应的线条美感，爵士舞也不值得注意。在展开暖身的弯曲动作必须注意，不适合在身体肌肉未几乎和暖前用弹振形式来做弯曲，否则更容易弄巧反拙，骨折肌肉。用静态方式弯曲较安全，不过也较必须耐性。柔软度的锻炼动作之幅度更不该超过疼痛的地步，肌肉有向上的感觉即可，动作(角度)保持的时间可由10馀秒至30-40秒平均，时间愈长对肌肉及关节附近的联结的组织之负荷也愈高。

以下几步就可以轻松使用浏览器内置的功能调试移动端网页了：

2. 手机上打开一个网页，只要是webview形式的网页应该都是可以的；

3. 电脑chrome浏览器地址栏输入：chrome://inspect/#devices ，会看到如下图的情况（上面会看到你所连接的设备的名称和信息，下面就是当前设备上可以用于在电脑上调试的页面的一下信息，地址、标题、网页大小。。。，如果没有显示设备信息，则表示没有连接好，可以插拔手机或关闭调试模式重开一下）；

4. 找到你准备调试的那个，并且确保手机上的那个页面也是处于激活状态的的，然后点击蓝色的 inspect 链接，会弹出一个新的窗口；

5. 熟悉的界面出现了，接下来你应该知道怎么用了，（恭喜！！！）

检查元素↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

控制台↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

查看网络情况↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

4. 电脑死活adb连接不成功？

方案一： 确保USB与PC的连接

1) 请确保USB连线能正常连通PC和手机（非常重要呀！）

简单确认方法：手机状态栏显示为充电状态。

2) 请确保PC的USB驱动已正常安装，可以在控制面板“设备管理器” “通用串行总线控制器”中确认无异常USB设备显示。

3) 点击重置，再次“启动检测”。

方案二： 使用adb启动

2) 找到设备，点击重置，再次“启动检测”

　　② 重拔usb链接调试设备

　　④ 重启电脑...

方案三： 安装PC应用宝