資訊專欄INFORMATION COLUMN
摘要：在開發(fā)時，當(dāng)然少不了調(diào)試呀。把安卓手機打開調(diào)試模式不知道在哪呀，趕緊百度，然后用連接上電腦，再打開瀏覽器，在平時我們輸入網(wǎng)站域名的地方，輸入以下字母代碼。
今天我們來聊聊APP開發(fā)，現(xiàn)在呀，人手都一部手機以上，就連7、8歲的孩子都自帶一臺手機了，手機給我們的手機帶上了多大的改變呀。
先扯點數(shù)據(jù)哈，2016年4月，在移動互聯(lián)網(wǎng)上，平均每個用戶每日花費時間為200分鐘。中國有3個互聯(lián)網(wǎng)巨頭，騰訊、阿里巴巴、百度，而網(wǎng)民花在這3個公司產(chǎn)品上的時間，占總花費時長的71%，其中微信占35%，QQ占10%。
微信占35%，現(xiàn)在的微信呀，已經(jīng)是比QQ時代占領(lǐng)的強度、廣度都要大呀，整個家，除了奶奶沒在用微信，哪個不是天天微信左扯一句，右扯一句的呀。
噢，扯遠了，回來回來。
現(xiàn)在我們的APP開發(fā)，大概可以分為Web App、Hybrid App、Native App，那在微信公眾號打開的html5頁面，我們可以簡稱為web app，Web App 指采用Html5語言寫出的App，不需要下載安裝。類似于現(xiàn)在所說的輕應(yīng)用。生存在瀏覽器中的應(yīng)用，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用。
以PC為王的時代，我們開發(fā)web時，調(diào)試是挺簡單方便快捷的，用得最多的就是谷歌開發(fā)的神器，chrome-devtools，在谷歌瀏覽器里，F(xiàn)12直接打開chrome-devtools就可以直接進行開發(fā)調(diào)試了。
那到現(xiàn)在我們手機為王的時代，我們的視線從電腦轉(zhuǎn)移到巴掌大的手機上。在開發(fā)web app時，當(dāng)然少不了調(diào)試呀。通常我們在開發(fā)web app時，在功能、界面開發(fā)時，可以先在PC上開發(fā)完成，等最后再走手機測試調(diào)試。
我們就博客來當(dāng)例子，現(xiàn)在打開，是適配PC界面的，當(dāng)我們要進行手機端開發(fā)時，請先點擊手機圖標(biāo)，看截圖。
我們現(xiàn)在看到的截圖中，可以看到一個手機界面的尺寸了，方便我們按手機的分辨率來進行開發(fā)。
當(dāng)我們基本開發(fā)完成后，雖然在真實的手機端進行測試，還是以博客為例子。
問題來了，如果我們直接在手機端進行類似于pc端的chrome-devtools怎么辦呀？之前這個問題也困擾了我很久，特別是在開發(fā)只允許在微信端打開的項目，一拿到PC端，狠狠的給你提示，請在微信端打開此頁面，感覺不在再愛了。
后來微信推出了微信web開發(fā)者工具，也使用過一段時間，也可以使用Chrome DevTools來遠程協(xié)助開發(fā)，今天的教程主要并不是這個，因為主要是針對于微信開發(fā)的，此次教程不局限于微信，只是web app都可以使用遠程chrome-devtools來調(diào)試，如果有想了解微信web開發(fā)工具的童鞋，請點擊這里。點擊這里！點擊這里！
容我想想，咱們還需要點什么工具呢，噢，對了，還要一臺安卓手機，蘋果不行呀（果粉請不要黑我，只支持安卓）。
把安卓手機打開USB調(diào)試模式（不知道在哪呀，趕緊百度），然后用USB連接上電腦，再打開瀏覽器，在平時我們輸入網(wǎng)站域名的地方，輸入以下字母代碼。
chrome://inspect
截圖中，“1”的位置，就是輸入chrome://inspect回車就可以看了。
重點來了，PC時代我們要按F12才出來的chrome-devtools，到手機時代，請點擊截圖中“2”的inspect。
天吶，熟悉的chrome-devtools又出現(xiàn)了，功能按打開PC頁面是一樣的，還有一個亮點哦，來來，再看截圖。
亮點就是映射了一個界面到chrome-devtools里，還可以直接在chrome-devtools進行操作，放手雙手呀。打開這個界面的方法，看截圖的箭頭哈，點擊一下就可以看到了。
這個調(diào)試用途非常廣，平時我們在開發(fā)Web App、Hybrid App、Native App時，只在在使用web打開的，基本可以用這個方法來調(diào)試。
今晚扯得有點多，又凌晨呀，時間都去哪啦。
文章首發(fā)于：http://lanchenglv.com/article...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54342.html
摘要：在開發(fā)時，當(dāng)然少不了調(diào)試呀。把安卓手機打開調(diào)試模式不知道在哪呀，趕緊百度，然后用連接上電腦，再打開瀏覽器，在平時我們輸入網(wǎng)站域名的地方，輸入以下字母代碼。 今天我們來聊聊APP開發(fā)，現(xiàn)在呀，人手都一部手機以上，就連7、8歲的孩子都自帶一臺手機了，手機給我們的手機帶上了多大的改變呀。 先扯點數(shù)據(jù)哈，2016年4月，在移動互聯(lián)網(wǎng)上，平均每個用戶每日花費時間為200分鐘。中國有3個互聯(lián)網(wǎng)巨頭...
摘要：查看安裝包版本信息查看信息提供掃描二維碼打開網(wǎng)頁。所以端發(fā)起網(wǎng)絡(luò)請求的時候，需要使用，這樣就可以避免這個問題參考資料什么是方案之和頁面交互原理的原理實現(xiàn)示例三部曲基本用法 1. 為什么選擇Hybrid開發(fā)方式 Hybrid開發(fā)效率高、跨平臺(M /58APP/英才APP) 維護成本低,功能可復(fù)用 針對新手友好,學(xué)習(xí)成本較低 功能更加完善,性能和體驗要比起web app好太多 部分性能...
摘要：詳見調(diào)試調(diào)試瀏覽器頁面在設(shè)置高級里檢查器打開連接隨便打開一個頁面在開發(fā)的選項中，可以檢查到打開的頁面，點開就可以對該頁面進行進一步的調(diào)試。 本人工作平臺mac，以下全部針對mac平臺 Charles http抓包 proxy>proxy settings 設(shè)置代理端口 手機設(shè)置代理連到端口上 手機里的所有請求都能被charles抓到 https抓包 proxy>SSL proxy...
閱讀 836·2025-02-07 13:29
閱讀 644·2024-11-07 18:25
閱讀 131094·2024-02-01 10:43
閱讀 1060·2024-01-31 14:58
閱讀 1022·2024-01-31 14:54
閱讀 83215·2024-01-29 17:11
閱讀 3497·2024-01-25 14:55
閱讀 2217·2023-06-02 13:36
