Suppose I have developed a web application using Vue that needs to be accessed and debugged from my mobile phone WeChat. Follow the steps in this article and use the WeChat Developer Tools to debug it.

Suppose the access point of my Web application is the “Reservation” button in the following official account menu:

In order to debug in the WeChat developer tool, I need to enter the background of the official account first, and add my own WeChat ID in the Web developer tool:

Click “Bind Developer Account “:

Enter the WeChat account to be bound:

Click bind, and the WeChat ID will receive a message asking whether to bind:

Click the agree action to complete the binding.

Next, put the URL of the web application to be debugged in the WeChat Developer Tools address bar. Enter and the WeChat Developer Tools will open an inquiry window. Click Allow to step through the WeChat Developer Tools interface similar to the Chrome Developer Tools Debugger.

The URL pasted into the address bar is elegant.… Where appid= the following value, is copied from the console of WeChat public number appid:

Redirect_uri, namely the development of web application for us, is deployed to the server after the generated url, need through the url encode processing:

When the URL is ready, paste it into the WeChat Developer Tools address bar, press enter, and you’ll see a dialog asking for permission to publish our information:

After clicking Allow, you can step through the WeChat Developer Tools just as you would with the Chrome Developer Tools debugger:

For more of Jerry’s original articles, please follow the official account “Wang Zixi “: