如何使用微信開發者工具除錯在微信端訪問的網頁

假設我用vue開發了一個web應用,需要在手機微信裡訪問並除錯, 可以按照本文介紹的步驟,使用微信開發者工具來除錯.

假設我的web應用的訪問入口是如下公眾號選單的"預約"按鈕:

那麼為了能夠在微信開發者工具裡除錯,需要首先進入該公眾號的後臺,在web開發者工具裡,將我本人的微訊號新增進去:

點選"繫結開發者賬號":

輸入待繫結的微信賬號:

點選繫結,該微訊號會收到一條訊息,詢問是否繫結:

點選同意操作完成繫結.

接下來,把要除錯的web應用的url放到微信開發者工具位址列裡,回車之後,微信開發者工具就會彈出一個詢問視窗,點選Allow之後,就可以在微信開發者工具提供的類似Chrome開發者工具偵錯程式一樣的介面裡進行單步除錯了.

這個貼上到位址列的url很有講究。

https:// open.weixin.qq.com/conn ect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中appid=後面的值，是從微信公眾號控制檯裡拷貝出來的appid：

redirect_uri, 即為我們開發的web應用，部署到伺服器之後生成的url，需要經過url encode處理： https://www. xxx.com/smart

這個url準備好之後，將其貼上到微信開發者工具位址列裡，回車，即可看到一個對話視窗，要求獲得我們公開資訊的許可：

點選Allow之後，就可以像使用Chrome開發者工具的偵錯程式一樣，在微信開發者工具裡進行單步除錯了：

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2672480/，如需轉載，請註明出處，否則將追究法律責任。