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

假設我用vue開發了一個web應用,須要在手機微信裏訪問並調試, 能夠按照本文介紹的步驟,使用微信開發者工具來調試.

假設個人web應用的訪問入口是以下公衆號菜單的"預定"按鈕:

那麼爲了可以在微信開發者工具裏調試,須要首先進入該公衆號的後臺,在web開發者工具裏,將我本人的微信號添加進去:

點擊"綁定開發者帳號":

輸入待綁定的微信帳號:

點擊綁定,該微信號會收到一條消息,詢問是否綁定:

點擊贊成操做完成綁定.

接下來,把要調試的web應用的url放到微信開發者工具地址欄裏,回車以後,微信開發者工具就會彈出一個詢問窗口,點擊Allow以後,就能夠在微信開發者工具提供的相似Chrome開發者工具調試器同樣的界面裏進行單步調試了.

這個粘貼到地址欄的url頗有講究。

https://open.weixin.qq.com/co...
其中appid=後面的值，是從微信公衆號控制檯裏拷貝出來的appid：

redirect_uri, 即爲咱們開發的web應用，部署到服務器以後生成的url，須要通過url encode處理：https://www.xxx.com/smart

這個url準備好以後，將其粘貼到微信開發者工具地址欄裏，回車，便可看到一個對話窗口，要求得到咱們公開信息的許可：

點擊Allow以後，就能夠像使用Chrome開發者工具的調試器同樣，在微信開發者工具裏進行單步調試了：

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":