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