微信調試js（微信調試模式怎麼打開）

本文目錄一覽：

• 1、如何調試微信端網頁JS代碼
• 2、關於微信JS的調用config的參數怎麼得到
• 3、uniapp中調用微信jssdk
• 4、微信公眾號web開發調試不方便嗎？送你2款調試工具完美解決
• 5、微信開發者工具——移動調試的簡單使用

如何調試微信端網頁JS代碼

下載一個微信開發者工具，可以直接搜，也可以搜小程序，收到有一個簡易教程小程序，點開之后里面當行有工具，點開就能找到了，這個比較全，即可以調試網頁，也可以開發小程序

關於微信JS的調用config的參數怎麼得到

wx.config({

    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。

    appId: ”, // 必填，公眾號的唯一標識

    timestamp: , // 必填，生成簽名的時間戳

    nonceStr: ”, // 必填，生成簽名的隨機串

    signature: ”,// 必填，簽名，見附錄1

    jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

uniapp中調用微信jssdk

1、安裝

“`

npm install jweixin-module –save

“`

2、創建文件share.wx.js

“`

// 引入微信jssdk

const jweixin = require(‘jweixin-module’)

const install = (Vue, vm) = {

// shareInfo: {

// title: ‘標題’,

// desc: ‘描述’,

// link: location.origin,

// imgUrl: ”

// }

const init = (shareInfo = {}) = {

// 獲取微信jssdk，用於分享

vm.$u.api.getWxjssdk({

url: location.href

}).then(res = {

res = res.data

vm.$u.vuex(‘vuex_wxjssdk’, res)

console.log(res)

jweixin.config({

debug: res.debug, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。

appId: res.appId, // 必填，公眾號的唯一標識

timestamp: res.timestamp, // 必填，生成簽名的時間戳

nonceStr: res.nonceStr, // 必填，生成簽名的隨機串

signature: res.signature, // 必填，簽名

jsApiList: res.jsApiList // 必填，需要使用的JS介面列表

});

jweixin.ready(() = {

console.log(shareInfo.title)

// 分享給朋友

jweixin.updateAppMessageShareData({

title: shareInfo.title,

desc: shareInfo.desc,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

// 設置成功

}

})

// 分享到朋友圈

jweixin.updateTimelineShareData({

title: shareInfo.title,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

// 設置成功

}

})

// 分享到朋友圈

jweixin.onMenuShareTimeline({

title: shareInfo.title,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

}

})

// 分享給朋友

jweixin.onMenuShareAppMessage({

title: shareInfo.title,

desc: shareInfo.desc,

link: shareInfo.link,

imgUrl: shareInfo.imgUrl,

success: () = {

}

})

});

jweixin.error(function(res) {

// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。

console.log(res)

});

})

};

// 將各個定義的介面名稱，統一放進對象掛載到vm.$u.api(因為vm就是this，也即this.$u.api)下

vm.$u.share = {

init

};

}

export default {

install

}

“`

3、main.js   app.$mount() 上面加入

“`

// 微信jssdk初始化

import wxshare from ‘@/common/share.wx.js’

Vue.use(wxshare, app)

“`

4、調用

“`

this.$u.share.init({

title: ‘標題’,

desc: ‘描述’,

link: location.origin,

imgUrl: ‘分享圖片地址’

})

“`

微信公眾號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 的。

–完–

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

       目前主要是做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」，熟悉的畫面再次出現！！！

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

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

心如繁星，是美還是罪？