在web開發(fā)的時候調(diào)試這一環(huán)是很重要的，之前日常調(diào)試主要使用chrome瀏覽器，不過，最近在進(jìn)行微信公眾號開發(fā)的時候，直接使用chrome進(jìn)行調(diào)試總是感覺很麻煩，因為涉及到微信驗證及跨域等問題。當(dāng)然，在此之前試了很多其它的調(diào)試方法，不過感覺還是微信官方提供的調(diào)試工具來得實在。下面記錄下，以便自己以后查看。

下載&安裝

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

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

　　上面是獲取安裝包的地址，選擇自己需要的版本進(jìn)行下載安裝。其實這兩個工具都是微信官方出的工具，應(yīng)該是不同的版本，暫且叫“微信開發(fā)者工具”和“微信小程序開發(fā)者工具”吧。其不同是“微信開發(fā)者工具”主要是對公眾號web的調(diào)試，在chrome的基礎(chǔ)上進(jìn)行修改的，可以通過usb鏈接電腦進(jìn)行真機(jī)調(diào)試。而微信小程序開發(fā)者工具則涵括了公眾號開發(fā)調(diào)試和微信小程序開發(fā)調(diào)試，不過試了下，公眾號開發(fā)調(diào)試的時候不能通過usb連接調(diào)試。

　　安裝時候要注意的是，這兩個工具要安裝在不同目錄，不然會提示安裝失敗。并且要注意的是安裝第二個的時候要把桌面已安裝的快捷圖標(biāo)改名，否則會被覆蓋。

設(shè)置跨域

　　“微信開發(fā)者工具”在安裝成功后，桌面找到新增的快捷圖標(biāo)右擊”屬性->快捷方式->目標(biāo)(T)" 在最后加上  --disable-web-security --user-data-dir 前面記得留空格！

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

連接真機(jī)調(diào)試

　　還是在“微信開發(fā)者工具”的基礎(chǔ)上連接調(diào)試，具體步驟如下：

　　1、手機(jī)端設(shè)置允許“USB調(diào)試”，

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

　　3、點擊“開始調(diào)試”后會打開新的頁面，顯示連接情況，如果沒有顯示連接設(shè)備，可以重插usb或者刷新微信公眾號頁面看看，如圖：

　　4、點擊“inspect”會打開調(diào)試頁面，跟平常在chrome下調(diào)試一樣，只是最近打開卻發(fā)現(xiàn)為空白頁面，后來查了下，是因為被墻了的原因，試著看能打開https://chrome-devtools-frontend.appspot.com 不，如果不行就是被墻或者公司ip屏蔽了，科學(xué)上網(wǎng)可以上github找下，挺多的，這里不推薦了。當(dāng)然，也可以試下清除緩存：chrome://appcache-internals/# ，只是微信開發(fā)者工具里好像打不開chrome://appcache-internals/# 。