在(zài)web開發的(de)時(shí)候調試這(zhè)一環是(shì)很重要(yào / yāo)的(de)，之(zhī)前日常調試主要(yào / yāo)使用chrome浏覽器，不(bù)過，最近在(zài)進行微信公衆号開發的(de)時(shí)候，直接使用chrome進行調試總是(shì)感覺很麻煩，因爲(wéi / wèi)涉及到(dào)微信驗證及跨域等問題。當然，在(zài)此之(zhī)前試了(le／liǎo)很多其它的(de)調試方法，不(bù)過感覺還是(shì)微信官方提供的(de)調試工具來(lái)得實在(zài)。下面記錄下，以(yǐ)便自己以(yǐ)後查看。

下載&安裝

　　微信開發者工具：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

　　  微信小程序開發者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2017119

　　上(shàng)面是(shì)獲取安裝包的(de)地(dì / de)址，選擇自己需要(yào / yāo)的(de)版本進行下載安裝。其實這(zhè)兩個(gè)工具都是(shì)微信官方出(chū)的(de)工具，應該是(shì)不(bù)同的(de)版本，暫且叫“微信開發者工具”和(hé / huò)“微信小程序開發者工具”吧。其不(bù)同是(shì)“微信開發者工具”主要(yào / yāo)是(shì)對公衆号web的(de)調試，在(zài)chrome的(de)基礎上(shàng)進行修改的(de)，可以(yǐ)通過usb鏈接電腦進行真機調試。而(ér)微信小程序開發者工具則涵括了(le／liǎo)公衆号開發調試和(hé / huò)微信小程序開發調試，不(bù)過試了(le／liǎo)下，公衆号開發調試的(de)時(shí)候不(bù)能通過usb連接調試。

　　安裝時(shí)候要(yào / yāo)注意的(de)是(shì)，這(zhè)兩個(gè)工具要(yào / yāo)安裝在(zài)不(bù)同目錄，不(bù)然會提示安裝失敗。并且要(yào / yāo)注意的(de)是(shì)安裝第二個(gè)的(de)時(shí)候要(yào / yāo)把桌面已安裝的(de)快捷圖标改名，否則會被覆蓋。

設置跨域

　　“微信開發者工具”在(zài)安裝成功後，桌面找到(dào)新增的(de)快捷圖标右擊”屬性->快捷方式->目标(T)" 在(zài)最後加上(shàng)  --disable-web-security --user-data-dir 前面記得留空格！

　　“微信小程序開發者工具”跨域的(de)話，在(zài)開發小程序的(de)模式下可以(yǐ)設置允許跨域，具體操作：打開小程序項目->微信小程序開發工具界面上(shàng)方“設置”->"項目設置“->右邊彈出(chū)”項目設置“->勾選”不(bù)校驗安全域名、TLS 版本以(yǐ)及 HTTPS 證書“, ok! 如果在(zài)公衆号網頁調試的(de)模式下要(yào / yāo)允許跨域的(de)話，暫時(shí)沒找到(dào)設置方法，找到(dào)再補充。

連接真機調試

　　還是(shì)在(zài)“微信開發者工具”的(de)基礎上(shàng)連接調試，具體步驟如下：

　　1、手機端設置允許“USB調試”，

　　2、按照提示的(de)步驟走，如圖

　　3、點擊“開始調試”後會打開新的(de)頁面，顯示連接情況，如果沒有顯示連接設備，可以(yǐ)重插usb或者刷新微信公衆号頁面看看，如圖：

　　4、點擊“inspect”會打開調試頁面，跟平常在(zài)chrome下調試一樣，隻是(shì)最近打開卻發現爲(wéi / wèi)空白頁面，後來(lái)查了(le／liǎo)下，是(shì)因爲(wéi / wèi)被牆了(le／liǎo)的(de)原因，試着看能打開https://chrome-devtools-frontend.appspot.com 不(bù)，如果不(bù)行就(jiù)是(shì)被牆或者公司ip屏蔽了(le／liǎo)，科學上(shàng)網可以(yǐ)上(shàng)github找下，挺多的(de)，這(zhè)裏不(bù)推薦了(le／liǎo)。當然，也(yě)可以(yǐ)試下清除緩存：chrome://appcache-internals/# ，隻是(shì)微信開發者工具裏好像打不(bù)開chrome://appcache-internals/# 。