微信怎麼調試js（微信怎麼調試黑色）

本文目錄一覽：

• 1、微信公眾號web開發調試不方便嗎？送你2款調試工具完美解決
• 2、如何調用微信js
• 3、微信開發者工具——移動調試的簡單使用

微信公眾號web開發調試不方便嗎？送你2款調試工具完美解決

前言

我們公司有做微信公眾號銜接的項目開發。前端小夥伴一般都是在chrome用手機模擬調試網頁，但是不方便調試與微信銜接部分的功能。有些bug在chrome上沒有調試出來，但是一到真機調試的時候，就出現了。

我也是大量的查閱資料並實踐，發現如下2個調試工具技巧，即可完美解決以上遇到的微信項目開發令人頭疼的調試問題。

1. vConsole 推薦指數：★★★★★

騰訊出品的 Web 調試面板，相信不少前端小夥伴都用過。vConsole 會在你網頁中加一個懸浮的小按鈕，可以點擊它來打開關閉調試面板，並查看 DOM、Console、Network和 本地存儲 等信息。基本可以滿足普通前端開發的需求。使用方法也很簡單，通過npm安裝或者直接在需要的頁面引入 js文件 ，然後 new VConsole() 就可以了。不熟悉的小夥伴可以直接去官方的 GitHub 看 README。但是它並沒有解決我的問題，因為我的 bug嚴重到一進頁面就報錯，脆弱的 javascript 直接原地爆炸，頁面一片空白。

2. 微信web開發者工具 推薦指數：★★★★★

這是一款早期的微信web開發者工具，最新版本： (2016.05.19)0.7.0

前端小夥伴可能更熟悉的是小程序web開發者工具。但是我今天主要介紹的是該工具的 移動調試功能,這一個也許可以用fiddler抓包工具，fiddler配置起來很麻煩，沒有該工具簡單，應付移動端調試抓包還是搓搓有餘。操作說明 請見官方文檔講得很清楚官方調試文檔說明

這兩款工具的實踐是前輩們踩過的坑，並填了坑。你看到了就賺到了，並自己花1個小時的時間學習一下，就為自己節省了很大部分的時間。

工欲善其事必先利其器，沒有好的調試工具或方法，移動端真機下的 debug 簡直是前端的噩夢。但是有了這些好用的方法，我想各位優秀的前端大佬，幫妹子修復個小 bug 還是 so easy 的。

–完–

如何調用微信js

你好，調用微信js最簡單的辦法，就是在java代碼調用微信的Android SDK（具體用法看微信開發品台的示例，很簡單）， 在js里使用jsb.reflection調用你的java方法。IOS也一樣。

微信開發者工具——移動調試的簡單使用

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

一、開發移動端頁面的工具

①移動端瀏覽器頁面

       這裡開發靜態頁面的做法和普通的PC頁面開發一樣，使用chrome瀏覽器進行開發和調試，但是不一樣的地方是把PC端的開發模式切換到手機開發模式（PC調試模式切換到移動端，點亮圖中 ②即可，圖中①處可以模擬不同移動端設備，同時可以自己添加設備），效果如下：

該方式可以直接調試

②嵌入APP中的移動端頁面

       對於某些經常舉辦針對用戶活動的APP對於嵌入H5頁面的需求是比較多的。因為這樣會節省開發的成本、減少原生APP的迭代速度、對用戶友好。

       開發嵌入原生APP的方式和第一種方式基本一致，唯一和第一種方式有些差別的是：如果h5頁面和原生APP存在一些交互（js需要獲取原生APP放回的數據），這種方式是沒法做到的，因為上述方式是放在瀏覽器這個APP下的，而不是某個特定的原生APP。

解決方法：

        先和原生APP開發的同事商議好接口，使用方式一進行靜態頁面開發（這裡面要寫好正常的邏輯），然後與後台同事聯調好接口，發不到測試，最後與原生開發的同事進行測試環境聯調。過程看起來複雜，如果原生接口沒問題，一般很快搞定。缺點就是和原生聯調的時候，如果有問題，不好排查。（不知各位有什麼好的方法，請指教！）

③開發微信端頁面

       其實這個不應該拎出來說的，因為微信頁面和在普通瀏覽器頁面“一樣”，可以認為微信中瀏覽網頁就是在用QQ瀏覽器瀏覽。所以不再贅述。

總結：移動端開發，還是f12“大法”，然後切換移動調試就行了。

二、微信開發者工具之移動調試的使用

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

針對微信的開發者工具，真的是極大的方便了開發微信項目的效率。

       下面是一個應用於本地的個稅計算器（其實控制台操作和瀏覽器f12基本一致，所以這個東西前端的同事一般立馬上手）：

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

       相對於iOS移動端調試，Android移動端調試更豐富一點，所以以安卓為例，ios調試方式同Android調試中的“普通調試”。

①普通調試

普通調試的步驟如下：

步驟解釋：

第一步：選擇無線網卡地址，默認即可，工具會自動查詢你的無線網卡ip v4地址

第二步：意思就是你的手機連接的網絡要和第一步得到的ip v4在同一個網段內（什麼是網段？看這裡）。簡單的做法就是把手機的網絡和電腦的網絡設置為同一個源（連接到同一個無線網上）

第三步：這個步驟很清楚了，還有一個快捷的方式就是“下拉工具欄——長按無線連接圖標”然後就可以直接進入到無線列表在做後續操作了。iOS操作如下：

iOS： 設置 – 無線局域網 – 選中網絡 – HTTP代理手動

第四步：設置好上面步驟以後，重啟微信，這可能是讓微信重新檢測目前的網絡情況，然後打開你想調試的頁面（注意，要先打開要調試的頁面才可以開始調試）

第五步：這個不在上面的說明裡，但是需要說明下，打開調試的網頁以後，在點擊下面的開始調試按鈕！

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

如果你當前沒有在微信打開調試頁面或打開的本地頁面地址錯誤，則會失敗：

       請注意 ，如果你想調試本地開發的頁面，需要你開啟web服務，使用;:port的方式來訪問，如果只是一個本地頁面，是無法打開調試的，形如webstrom裡面快捷打開的頁面地址： 這個是無法調試的。需要你搭建WEB服務，使用類似於 這種url。（ 這種寫法也是無法調試的，因為微信根本打不開）。

調試模式開啟以後，我們就可以直接在手機上查看調試的結果或者修改東西：

我選中這裡，手機就會有類似於PC端選中的狀態一樣被選中

       好了，可以直接看着手機調頁面了，對於一些手機端的兼容性處理更有針對性，而且可以在network那裡看網絡請求，十分方便。

②X5 blink內核調試

X5 blink調試步驟如下：

       首先開發者工具要驗證你的手機是不是支持該調試功能，所以，首先選擇驗證，然後在按下面的步驟做：

       上面三步結束以後，直接點擊開始調試按鈕，工具會給出一個彈框，檢測出你的手機信息，但是其他什麼都沒有，像這樣

那是因為——微信還沒有打開能調試的頁面！！！

同樣，打開一個能調試的頁面，這個“白板”就變了樣子了，

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

然後點擊箭頭指向的“inspect”，熟悉的畫面再次出現！！！

好啦，這樣就可以愉快的去調試真機界面了！

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

心如繁星，是美還是罪？