2018-08-01更新
最近一直在寫小程序，公眾號開發很少弄了。由於線上公眾號項目要調整，所以又要搗騰公眾號的開發環境。因為微信開發者工具已經集成了“公眾號開發”和“小程序開發”兩大開發環境，所以直接下載安裝開發者工具打開選擇“公眾號網頁項目”就好。
在設置跨域的時候發現按照之前的方法不行，后來發現是要關閉后配置重啟搞定。
--disable-web-security --user-data-dir
在web開發的時候調試這一環是很重要的，之前日常調試主要使用chrome瀏覽器，不過，最近在進行微信公眾號開發的時候，直接使用chrome進行調試總是感覺很麻煩，因為涉及到微信驗證及跨域等問題。當然，在此之前試了很多其它的調試方法，不過感覺還是微信官方提供的調試工具來得實在。下面記錄下，以便自己以后查看。
下載&安裝
微信開發者工具：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
上面是獲取安裝包的地址，選擇自己需要的版本進行下載安裝。其實這兩個工具都是微信官方出的工具，應該是不同的版本，暫且叫“微信開發者工具”和“微信小程序開發者工具”吧。其不同是“微信開發者工具”主要是對公眾號web的調試，在chrome的基礎上進行修改的，可以通過usb鏈接電腦進行真機調試。而微信小程序開發者工具則涵括了公眾號開發調試和微信小程序開發調試，不過試了下，公眾號開發調試的時候不能通過usb連接調試。
安裝時候要注意的是，這兩個工具要安裝在不同目錄，不然會提示安裝失敗。並且要注意的是安裝第二個的時候要把桌面已安裝的快捷圖標改名，否則會被覆蓋。
設置跨域
“微信開發者工具”在安裝成功后，桌面找到新增的快捷圖標右擊”屬性->快捷方式->目標(T)" 在最后加上 --disable-web-security --user-data-dir 前面記得留空格！
“微信小程序開發者工具”跨域的話，在開發小程序的模式下可以設置允許跨域，具體操作：打開小程序項目->微信小程序開發工具界面上方“設置”->"項目設置“->右邊彈出”項目設置“->勾選”不校驗安全域名、TLS 版本以及 HTTPS 證書“, ok! 如果在公眾號網頁調試的模式下要允許跨域的話，暫時沒找到設置方法，找到再補充。
連接真機調試
還是在“微信開發者工具”的基礎上連接調試，具體步驟如下：
1、手機端設置允許“USB調試”，
2、按照提示的步驟走，如圖
3、點擊“開始調試”后會打開新的頁面，顯示連接情況，如果沒有顯示連接設備，可以重插usb或者刷新微信公眾號頁面看看，如圖：
4、點擊“inspect”會打開調試頁面，跟平常在chrome下調試一樣，只是最近打開卻發現為空白頁面，后來查了下，是因為被牆了的原因，試着看能打開https://chrome-devtools-frontend.appspot.com 不，如果不行就是被牆或者公司ip屏蔽了，科學上網可以上github找下，挺多的，這里不推薦了。當然，也可以試下清除緩存：chrome://appcache-internals/# ，只是微信開發者工具里好像打不開chrome://appcache-internals/# 。