1. Home > programming >

Java WeChat public platform development (14) Use of WeChat web developer tools

To help developers develop and debug web pages based on WeChat more conveniently and safely, WeChat has launched a web developer tool. It is a desktop application that simulates the performance of the WeChat client so that developers can use this tool to easily develop and debug on a PC or Mac. You can:

Use your own WeChat account to debug WeChat webpage authorization

Debug and verify the JS-SDK related functions and permissions of the page, and simulate the input and output of most SDKs


Use the mobile debugging function based on weinre

Use the integrated Chrome DevTools to assist development

The tool interface is mainly composed of several parts, as shown in the following figure:



The top menu bar is a unified entry for actions such as refreshing, backing, and selecting the address bar, as well as the simulation setting page of the WeChat client version. On the left is the webview simulator of WeChat, which can directly operate web pages and simulate the real behavior of users. On the upper right side is the address bar, which is used to enter the link to the page to be debugged and the button to clear the cache. On the bottom right are related requests and return results, as well as the debugging interface and login buttons.

(1) Debug WeChat webpage authorization

When developing the function of WeChat-based webpage authorization before, developers usually need to enter the URL on the mobile phone to obtain User information, so as to carry out development and debugging work, but because of the many limitations of mobile phones, this process is very inconvenient. By using the WeChat web developer tool, from now on developers can directly perform this kind of debugging on PC or Mac. The specific steps are as follows:

①The developer can click "Login" in the debugger and use the mobile phone WeChat scan code to log in, so as to use the real user identity (support test number) to develop and debug WeChat webpage authorization . Please confirm the mobile login page, the official account bound to "WeChat web developer tools", as shown below:


②In order to ensure the security of the developer’s identity information, we require development The WeChat account establishes a binding relationship with it. The specific operation is: log in to the management background of the official account, enable the developer center, and send a binding invitation to the developer's WeChat account on the developer tools-web developer tools page. The binding page is shown in the figure below:


③The developer can complete the binding by accepting the invitation on the mobile phone WeChat. Each official account can bind up to 10 developer WeChat accounts at the same time. The invitation confirmation page is shown below:


④After completing the login and binding, the developer can start debugging the WeChat webpage authorization. Note that you can only debug the official account that you have bound to, in the WeChat web developer tool Open a similar authorization page URL in the webview simulator, as shown in the figure:


(2) Simulate JSSDK permission verification

Through the web developer tool, you can Simulate the request of JSSDK in the WeChat client, and visually see the authentication result and log. Take the WeChat JSSDK DEMO page as an example: http://demo.open.weixin.qq.com/jssdk Open the URL in the debugger, you can easily see the current page wx.config in the JS-SDK Tab on the right The verification status and the call log of JSSDK. The following is the page that passed the verification:


The following is the page that failed the verification:


In the "Permission List" Tab, you can find the current List of JS-SDKs that the page has permission:


(3) Mobile debugging

I have never succeeded in mobile debugging, so I won’t explain it here!

(4) Chrome DevTools

WeChat web developer tools integrate Chrome DevTools. The same as the previous debugging experience on the PC, you can get started quickly. As shown in the figure below:


Download link:http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html #.E4.B8.8B.E8.BD.BD.E5.9C.B0.E5.9D.80

This is the brief introduction to the use of WeChat web developer tools, thank you for reading, If you have any questions, you can leave a message to discuss!

The above is the entire content of this article, I hope it will be helpful to everyone's study, and I hope everyone will support it.

Content recommendation: free high-definition PNG material download

This article is published by www.internetweblist.com and does not represent the position of www.internetweblist.com/:http://www.internetweblist.com/programming/82407.html

Contact Us

Online consultation:click here to give a message