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...