Web App、Hybrid App开发之chrome-devtools调试

今天咱们来聊聊APP开发，如今呀，人手都一部手机以上，就连七、8岁的孩子都自带一台手机了，手机给咱们的手机带上了多大的改变呀。

先扯点数据哈，2016年4月，在移动互联网上，平均每一个用户每日花费时间为200分钟。中国有3个互联网巨头，腾讯、阿里巴巴、百度，而网民花在这3个公司产品上的时间，占总花费时长的71%，其中微信占35%，QQ占10%。

微信占35%，如今的微信呀，已是比QQ时代占领的强度、广度都要大呀，整个家，除了奶奶没在用微信，哪一个不是每天微信左扯一句，右扯一句的呀。

噢，扯远了，回来回来。

如今咱们的APP开发，大概能够分为Web App、Hybrid App、Native App，那在微信公众号打开的html5页面，咱们能够简称为web app，Web App 指采用Html5语言写出的App，不须要下载安装。相似于如今所说的轻应用。生存在浏览器中的应用，基本上能够说是触屏版的网页应用。

以PC为王的时代，咱们开发web时，调试是挺简单方便快捷的，用得最多的就是谷歌开发的神器，chrome-devtools，在谷歌浏览器里，F12直接打开chrome-devtools就能够直接进行开发调试了。

那到如今咱们手机为王的时代，咱们的视线从电脑转移到巴掌大的手机上。在开发web app时，固然少不了调试呀。一般咱们在开发web app时，在功能、界面开发时，能够先在PC上开发完成，等最后再走手机测试调试。

咱们就博客来当例子，如今打开，是适配PC界面的，当咱们要进行手机端开发时，请先点击手机图标，看截图。

咱们如今看到的截图中，能够看到一个手机界面的尺寸了，方便咱们按手机的分辨率来进行开发。

当咱们基本开发完成后，虽然在真实的手机端进行测试，仍是以博客为例子。

问题来了，若是咱们直接在手机端进行相似于pc端的chrome-devtools怎么办呀？以前这个问题也困扰了我好久，特别是在开发只容许在微信端打开的项目，一拿到PC端，狠狠的给你提示，请在微信端打开此页面，感受不在再爱了。
后来微信推出了微信web开发者工具，也使用过一段时间，也可使用Chrome DevTools来远程协助开发，今天的教程主要并非这个，由于主要是针对于微信开发的，这次教程不局限于微信，只是web app均可以使用远程chrome-devtools来调试，若是有想了解微信web开发工具的童鞋，请点击这里。点击这里！点击这里！

容我想一想，我们还须要点什么工具呢，噢，对了，还要一台安卓手机，苹果不行呀（果粉请不要黑我，只支持安卓）。

把安卓手机打开USB调试模式（不知道在哪呀，赶忙百度），而后用USB链接上电脑，再打开浏览器，在平时咱们输入网站域名的地方，输入如下字母代码。

chrome://inspect

截图中，“1”的位置，就是输入chrome://inspect回车就能够看了。
重点来了，PC时代咱们要按F12才出来的chrome-devtools，到手机时代，请点击截图中“2”的inspect。

天呐，熟悉的chrome-devtools又出现了，功能按打开PC页面是同样的，还有一个亮点哦，来来，再看截图。

亮点就是映射了一个界面到chrome-devtools里，还能够直接在chrome-devtools进行操做，放手双手呀。打开这个界面的方法，看截图的箭头哈，点击一下就能够看到了。

这个调试用途很是广，平时咱们在开发Web App、Hybrid App、Native App时，只在在使用web打开的，基本能够用这个方法来调试。

今晚扯得有点多，又凌晨呀，时间都去哪啦。

文章首发于：http://lanchenglv.com/article...