成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web App、Hybrid App開發(fā)之chrome-devtools調(diào)試

qieangel2013 / 2003人閱讀

摘要：在開發(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分鐘。中國有3個(gè)互聯(lián)網(wǎng)巨頭，騰訊、阿里巴巴、百度，而網(wǎng)民花在這3個(gè)公司產(chǎn)品上的時(shí)間，占總花費(fèi)時(shí)長的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頁面，我們可以簡稱為web app，Web App 指采用Html5語言寫出的App，不需要下載安裝。類似于現(xiàn)在所說的輕應(yīng)用。生存在瀏覽器中的應(yīng)用，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用。

以PC為王的時(shí)代，我們開發(fā)web時(shí)，調(diào)試是挺簡單方便快捷的，用得最多的就是谷歌開發(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)試呀。通常我們在開發(fā)web app時(shí)，在功能、界面開發(fā)時(shí)，可以先在PC上開發(fā)完成，等最后再走手機(jī)測試調(diào)試。

我們就博客來當(dāng)例子，現(xiàn)在打開，是適配PC界面的，當(dāng)我們要進(jìn)行手機(jī)端開發(fā)時(shí)，請先點(diǎn)擊手機(jī)圖標(biāo)，看截圖。

我們現(xiàn)在看到的截圖中，可以看到一個(gè)手機(jī)界面的尺寸了，方便我們按手機(jī)的分辨率來進(jìn)行開發(fā)。

當(dāng)我們基本開發(fā)完成后，雖然在真實(shí)的手機(jī)端進(jìn)行測試，還是以博客為例子。

問題來了，如果我們直接在手機(jī)端進(jìn)行類似于pc端的chrome-devtools怎么辦呀？之前這個(gè)問題也困擾了我很久，特別是在開發(fā)只允許在微信端打開的項(xiàng)目，一拿到PC端，狠狠的給你提示，請?jiān)谖⑿哦舜蜷_此頁面，感覺不在再愛了。
后來微信推出了微信web開發(fā)者工具，也使用過一段時(shí)間，也可以使用Chrome DevTools來遠(yuǎn)程協(xié)助開發(fā)，今天的教程主要并不是這個(gè)，因?yàn)橹饕轻槍τ谖⑿砰_發(fā)的，此次教程不局限于微信，只是web app都可以使用遠(yuǎn)程chrome-devtools來調(diào)試，如果有想了解微信web開發(fā)工具的童鞋，請點(diǎn)擊這里。點(diǎn)擊這里！點(diǎn)擊這里！

容我想想，咱們還需要點(diǎn)什么工具呢，噢，對了，還要一臺(tái)安卓手機(jī)，蘋果不行呀（果粉請不要黑我，只支持安卓）。

把安卓手機(jī)打開USB調(diào)試模式（不知道在哪呀，趕緊百度），然后用USB連接上電腦，再打開瀏覽器，在平時(shí)我們輸入網(wǎng)站域名的地方，輸入以下字母代碼。

chrome://inspect

截圖中，“1”的位置，就是輸入chrome://inspect回車就可以看了。
重點(diǎn)來了，PC時(shí)代我們要按F12才出來的chrome-devtools，到手機(jī)時(shí)代，請點(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í)我們在開發(fā)Web App、Hybrid App、Native App時(shí)，只在在使用web打開的，基本可以用這個(gè)方法來調(diào)試。

今晚扯得有點(diǎn)多，又凌晨呀，時(shí)間都去哪啦。

文章首發(fā)于：http://lanchenglv.com/article...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79573.html

相關(guān)文章

  • Web App、Hybrid App開發(fā)之chrome-devtools調(diào)試

    摘要：在開發(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分鐘。中國有3個(gè)互聯(lián)網(wǎng)巨頭...

    ernest.wang 評論0 收藏0

  • Hybrid開發(fā)

    摘要：查看安裝包版本信息查看信息提供掃描二維碼打開網(wǎng)頁。所以端發(fā)起網(wǎng)絡(luò)請求的時(shí)候，需要使用，這樣就可以避免這個(gè)問題參考資料什么是方案之和頁面交互原理的原理實(shí)現(xiàn)示例三部曲基本用法 1. 為什么選擇Hybrid開發(fā)方式 Hybrid開發(fā)效率高、跨平臺(tái)(M /58APP/英才APP) 維護(hù)成本低,功能可復(fù)用 針對新手友好,學(xué)習(xí)成本較低 功能更加完善,性能和體驗(yàn)要比起web app好太多 部分性能...

    DoINsiSt 評論0 收藏0

  • 我的webview調(diào)試工具

    摘要：詳見調(diào)試調(diào)試瀏覽器頁面在設(shè)置高級里檢查器打開連接隨便打開一個(gè)頁面在開發(fā)的選項(xiàng)中，可以檢查到打開的頁面，點(diǎn)開就可以對該頁面進(jìn)行進(jìn)一步的調(diào)試。 本人工作平臺(tái)mac，以下全部針對mac平臺(tái) Charles http抓包 proxy>proxy settings 設(shè)置代理端口 手機(jī)設(shè)置代理連到端口上 手機(jī)里的所有請求都能被charles抓到 https抓包 proxy>SSL proxy...

    jaysun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<