微信開發(fā)者工具——移動調(diào)試的簡單使用

?目前主要是做PC端項(xiàng)目，但是偶爾也會有移動端需求提來，有在原生APP中的，也有在微信和瀏覽器中的，目前也就接觸過這三個(gè)場景，對于移動端的坑入得也不深，本文介紹也是偏應(yīng)用，如有不足請見諒。

公司專注于為企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號開發(fā)、商城開發(fā)，微信小程序，軟件按需策劃等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，成都創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

一、開發(fā)移動端頁面的工具

①移動端瀏覽器頁面

? ?這里開發(fā)靜態(tài)頁面的做法和普通的PC頁面開發(fā)一樣，使用chrome瀏覽器進(jìn)行開發(fā)和調(diào)試，但是不一樣的地方是把PC端的開發(fā)模式切換到手機(jī)開發(fā)模式（PC調(diào)試模式切換到移動端，點(diǎn)亮圖中 ②即可，圖中①處可以模擬不同移動端設(shè)備，同時(shí)可以自己添加設(shè)備），效果如下：

該方式可以直接調(diào)試

②嵌入APP中的移動端頁面

? ?對于某些經(jīng)常舉辦針對用戶活動的APP對于嵌入H5頁面的需求是比較多的。因?yàn)檫@樣會節(jié)省開發(fā)的成本、減少原生APP的迭代速度、對用戶友好。

? ?開發(fā)嵌入原生APP的方式和第一種方式基本一致，唯一和第一種方式有些差別的是：如果h5頁面和原生APP存在一些交互（js需要獲取原生APP放回的數(shù)據(jù)），這種方式是沒法做到的，因?yàn)樯鲜龇绞绞欠旁跒g覽器這個(gè)APP下的，而不是某個(gè)特定的原生APP。

解決方法：

? ? 先和原生APP開發(fā)的同事商議好接口，使用方式一進(jìn)行靜態(tài)頁面開發(fā)（這里面要寫好正常的邏輯），然后與后臺同事聯(lián)調(diào)好接口，發(fā)不到測試，最后與原生開發(fā)的同事進(jìn)行測試環(huán)境聯(lián)調(diào)。過程看起來復(fù)雜，如果原生接口沒問題，一般很快搞定。缺點(diǎn)就是和原生聯(lián)調(diào)的時(shí)候，如果有問題，不好排查。（不知各位有什么好的方法，請指教！）

③開發(fā)微信端頁面

? ?其實(shí)這個(gè)不應(yīng)該拎出來說的，因?yàn)槲⑿彭撁婧驮谄胀g覽器頁面“一樣”，可以認(rèn)為微信中瀏覽網(wǎng)頁就是在用QQ瀏覽器瀏覽。所以不再贅述。

總結(jié)：移動端開發(fā)，還是f12“大法”，然后切換移動調(diào)試就行了。

二、微信開發(fā)者工具之移動調(diào)試的使用

? ?對于f12開發(fā)小型的頁面是沒問題的，但是如果是基于微信的項(xiàng)目就有些力不從心了。所以大部分針對微信開發(fā)的項(xiàng)目基本上都可以使用 微信開發(fā)者工具 。

針對微信的開發(fā)者工具，真的是極大的方便了開發(fā)微信項(xiàng)目的效率。

? ?下面是一個(gè)應(yīng)用于本地的個(gè)稅計(jì)算器（其實(shí)控制臺操作和瀏覽器f12基本一致，所以這個(gè)東西前端的同事一般立馬上手）：

? ?但是，這個(gè)開發(fā)者工具雖然是微信官方開發(fā)工具，但是畢竟是模擬器，現(xiàn)實(shí)情況的復(fù)雜會導(dǎo)致有些樣式不兼容。例如vivo的微信客戶端，顯示總是錯亂的（測試的同事發(fā)現(xiàn)的問題，她的手機(jī)可以還原場景，但是我的手機(jī)端是正常的）。所以，我們需要有針對性的在這款手機(jī)真機(jī)上調(diào)試，如何做呢？下面簡要介紹如何利用微信開發(fā)者工具進(jìn)行真機(jī)調(diào)試。

? ?相對于iOS移動端調(diào)試，Android移動端調(diào)試更豐富一點(diǎn)，所以以安卓為例，ios調(diào)試方式同Android調(diào)試中的“普通調(diào)試”。

①普通調(diào)試

普通調(diào)試的步驟如下：

步驟解釋：

第一步：選擇無線網(wǎng)卡地址，默認(rèn)即可，工具會自動查詢你的無線網(wǎng)卡ip v4地址

第二步：意思就是你的手機(jī)連接的網(wǎng)絡(luò)要和第一步得到的ip v4在同一個(gè)網(wǎng)段內(nèi)（什么是網(wǎng)段？看這里）。簡單的做法就是把手機(jī)的網(wǎng)絡(luò)和電腦的網(wǎng)絡(luò)設(shè)置為同一個(gè)源（連接到同一個(gè)無線網(wǎng)上）

第三步：這個(gè)步驟很清楚了，還有一個(gè)快捷的方式就是“下拉工具欄——長按無線連接圖標(biāo)”然后就可以直接進(jìn)入到無線列表在做后續(xù)操作了。iOS操作如下：

iOS： 設(shè)置 - 無線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP代理手動

第四步：設(shè)置好上面步驟以后，重啟微信，這可能是讓微信重新檢測目前的網(wǎng)絡(luò)情況，然后打開你想調(diào)試的頁面（注意，要先打開要調(diào)試的頁面才可以開始調(diào)試）

第五步：這個(gè)不在上面的說明里，但是需要說明下，打開調(diào)試的網(wǎng)頁以后，在點(diǎn)擊下面的開始調(diào)試按鈕！

如果你的操作正確，彈出框會是這樣的：

如果你當(dāng)前沒有在微信打開調(diào)試頁面或打開的本地頁面地址錯誤，則會失敗：

? ?請注意 ，如果你想調(diào)試本地開發(fā)的頁面，需要你開啟web服務(wù)，使用;:port的方式來訪問，如果只是一個(gè)本地頁面，是無法打開調(diào)試的，形如webstrom里面快捷打開的頁面地址： 這個(gè)是無法調(diào)試的。需要你搭建WEB服務(wù)，使用類似于 這種url。（ 這種寫法也是無法調(diào)試的，因?yàn)槲⑿鸥敬虿婚_）。

調(diào)試模式開啟以后，我們就可以直接在手機(jī)上查看調(diào)試的結(jié)果或者修改東西：

我選中這里，手機(jī)就會有類似于PC端選中的狀態(tài)一樣被選中

? ?好了，可以直接看著手機(jī)調(diào)頁面了，對于一些手機(jī)端的兼容性處理更有針對性，而且可以在network那里看網(wǎng)絡(luò)請求，十分方便。

②X5 blink內(nèi)核調(diào)試

X5 blink調(diào)試步驟如下：

?首先開發(fā)者工具要驗(yàn)證你的手機(jī)是不是支持該調(diào)試功能，所以，首先選擇驗(yàn)證，然后在按下面的步驟做：

? ?上面三步結(jié)束以后，直接點(diǎn)擊開始調(diào)試按鈕，工具會給出一個(gè)彈框，檢測出你的手機(jī)信息，但是其他什么都沒有，像這樣

那是因?yàn)椤⑿胚€沒有打開能調(diào)試的頁面！！！

同樣，打開一個(gè)能調(diào)試的頁面，這個(gè)“白板”就變了樣子了，

注意：過程中會提示“是否允許USB調(diào)試”，選擇同意即可

然后點(diǎn)擊箭頭指向的“inspect”，熟悉的畫面再次出現(xiàn)！！！

好啦，這樣就可以愉快的去調(diào)試真機(jī)界面了！

本文以應(yīng)用為主，說的不深，不足之處還請見諒！

心如繁星，是美還是罪？

微信web開發(fā)者工具怎么使用

微信web開發(fā)者工具使用，用到的工具：電腦，步驟如下：

下載安裝微信web開發(fā)者工具，打開微信web開發(fā)者工具界面如下：

2.輸入要調(diào)試微信程序的url，并選擇移動設(shè)備的類型（安卓或者ios），以安卓為例：

說明：左邊選擇相應(yīng)的區(qū)塊，右邊的代碼就會追蹤到。

注意事項(xiàng)：打開調(diào)試工具中的url需要微信公眾號平臺授權(quán)登錄微信web開發(fā)者工具。

微信web開發(fā)者工具 ios怎么使用

微信web開發(fā)者工具主要功能：

使用自己的微信號來調(diào)試微信網(wǎng)頁授權(quán)；

調(diào)試、檢驗(yàn)頁面的 JS-SDK 相關(guān)功能與權(quán)限，模擬大部分 SDK 的輸入和輸出；

使用基于 weinre 的移動調(diào)試功能；

利用集成的 Chrome DevTools 協(xié)助開發(fā)。

　

　工具頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設(shè)置頁。左側(cè)是微信的 webview 模擬器，可以直接操作網(wǎng)

頁，模擬用戶真實(shí)行為。右側(cè)上方是地址欄，用于輸入待調(diào)試的頁面鏈接，以及清除緩存按鈕。右側(cè)下方是相關(guān)的請求和返回結(jié)果，以及調(diào)試界面和登錄按鈕。

網(wǎng)頁題目：微信開發(fā)者工具ios,微信開發(fā)者工具ios版
URL標(biāo)題：http://chinadenli.net/article24/dsehjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、關(guān)鍵詞優(yōu)化、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)