資訊專欄INFORMATION COLUMN
摘要：在開發時，當然少不了調試呀。把安卓手機打開調試模式不知道在哪呀，趕緊百度，然后用連接上電腦，再打開瀏覽器，在平時我們輸入網站域名的地方，輸入以下字母代碼。
今天我們來聊聊APP開發，現在呀，人手都一部手機以上，就連7、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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79573.html
摘要：在開發時，當然少不了調試呀。把安卓手機打開調試模式不知道在哪呀，趕緊百度，然后用連接上電腦，再打開瀏覽器，在平時我們輸入網站域名的地方，輸入以下字母代碼。 今天我們來聊聊APP開發，現在呀，人手都一部手機以上，就連7、8歲的孩子都自帶一臺手機了，手機給我們的手機帶上了多大的改變呀。 先扯點數據哈，2016年4月，在移動互聯網上，平均每個用戶每日花費時間為200分鐘。中國有3個互聯網巨頭...
摘要：詳見調試調試瀏覽器頁面在設置高級里檢查器打開連接隨便打開一個頁面在開發的選項中，可以檢查到打開的頁面，點開就可以對該頁面進行進一步的調試。 本人工作平臺mac，以下全部針對mac平臺 Charles http抓包 proxy>proxy settings 設置代理端口 手機設置代理連到端口上 手機里的所有請求都能被charles抓到 https抓包 proxy>SSL proxy...
閱讀 3753·2021-08-11 11:16
閱讀 1621·2019-08-30 15:44
閱讀 1995·2019-08-29 18:45
閱讀 2267·2019-08-26 18:18
閱讀 996·2019-08-26 13:37
閱讀 1565·2019-08-26 11:43
閱讀 2109·2019-08-26 11:34
閱讀 372·2019-08-26 10:59
