Contents

2 Debugging Weixin Webpage Authorization

# Summary

We launched a Web DevTools to provide developers with a convenient and secure tool to develop and debug Weixin-based webpages. As a desktop app, developers can easily use this tool for development and debugging on the PC or Mac by simulating the performance of the Weixin app. Download now to experience it.

You can:

Use your own Weixin ID to debug Weixin webpage authorization
Debug and verify JS-SDK-related features and permissions on pages and simulate the input and output of most SDKs.
Use the weinre-based mobile debugging feature that supports remote debugging of <a href="http://x5.tencent.com/guide?id=4000 "Introduction to X5 Blink"" target="_blank">the X5 Blink kernel.
Use integrated Chrome DevTools for development

The tool interface consists of several major components, as shown below:

The top menu bar provides entries to actions such as refresh, back, and selecting address bar, as well as a simulated settings page for the Weixin app version. On the left side of the interface is the Weixin webview simulator, where you can directly manipulate webpages to simulate real user behavior. On the upper right are the address bar where you can enter a page link to be debugged and the button for clearing cache. On the lower right are related requests and returned results, as well as the debug interface and login button.

# Debugging Weixin Webpage Authorization

Previously, when developing Weixin-based webpage authorization feature, developers generally had to enter URLs on their mobile phones to get user information for development or debugging. However, this was inconvenient due to numerous limitations of mobile phones. With Weixin Web DevTools, developers can directly perform debugging on their PCs or Macs by following the steps below:

Tap Log In on the simulator, scan the code using the Weixin app, and use your real identity (test account is supported) to develop and debug Weixin webpage authorization. Confirm login on your phone and link the "Weixin Web DevTools" official account, as shown below:

To ensure the security of your identity, you must link your Weixin ID to the Official Account you want to debug. This can be done by logging in to the admin console with the Official Account, enabling the Developer Center, and sending an invitation to link the account to your Weixin ID via DevTools > Web DevTools. The linking page is shown below:

Accept the invitation in the Weixin app on your phone to link the Official Account. Each Official Account can be linked to a maximum of 10 developer Weixin IDs at a time. The invitation confirmation page is shown below:

After login and linking, you can begin debugging Weixin webpage authorization. Note that you can only debug linked Official Accounts:

Example of non-silent authorization URL:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo

&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

Open a similar authorization page URL in the Weixin Web DevTools (the sample URL cannot be used directly; replace it with the authorization page URL of a linked Official Account), and the webview simulator will display as follows:

Click Confirm Login to be redirected to a third-party page with the user information, which makes it easy for subsequent development and debugging.

Example of silent authorization URL:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base

&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

Note: If you are using a proxy, the proxy itself must support direct HTTPS connection to debug the HTTPS pages.

# Simulating JSSDK Authorization Check

The Web DevTools allows you to simulate JSSDK requests in the Weixin app and view the authentication results and log. Take the Weixin JSSDK DEMO page as an example:

http://demo.open.weixin.qq.com/jssdk

Open the URL in the debugger to see the verification status and JSSDK call log of the current page (wx.config) in the JS-SDK tab on the right. This is a page that has been successfully verified:

This is a page that failed to be verified:

In the "Permission List" tab, you can query the list of authorized JS-SDKs on the current page:

Combined with the Weixin Webview simulator on the left, you can visually debug JSSDK, as shown in this JSSDK Demo, which uses Weixin Web DevTools to debug cards and coupons:

http://203.195.235.76:8080/jssdk/wxcardDemo.php

Note: The Weixin Web DevTools 0.7.0 or later supports debugging the card/coupon JSSDK. However, you must link your Weixin ID to the card/coupon Official Account you want to debug. For the linking process, refer to the authorization login process.

# Mobile Debugging

The performance of mobile webpages usually differs from desktop browsers, including style rendering, script logic, etc. This may be a problem for developers. Now that the webview of the Weixin app for Android has been fully upgraded to the X5 Blink kernel, there are great improvements in rendering capabilities, API support, and development assistance. With remote debugging in the Weixin Web DevTools, the mobile phone screen can be mapped to the Weixin Web DevTools in real time, helping developers debug X5 Blink kernel pages more efficiently. The detailed steps are as follows:

(1) Preparations

Install the Weixin Web DevTools 0.5.0 or above
Confirm that the mobile device supports remote debugging

Open the Weixin Web DevTools and select the Mobile Debugging tab. Tap Verify if mobile device supports remote debugging. Then use the mobile device to scan the QR code that pops up, and verification results will be sent to the device.

Open USB debugging in the mobile device

a. Go to Settings > Developer Options on the mobile device

b. Check "USB Debugging"

Note that developer options are hidden by default on Android 4.2 or above. You can enable it with the following steps:

a. Go to Settings > About on the mobile device

b. Find "Build Number" and tap it 7 times

Install mobile device USB driver

Generally, you can download relevant drivers on the official device manufacturer website, or use <a href="http://m.qq.com/ "Tencent Mobile Manager"" target="_blank">Tencent Mobile Manager to download device drivers.

Enable the inspector feature of the X5 Blink kernel

Open the Weixin Web DevTools and select the Mobile Debugging tab. Use your device to scan the QR code in Debugging Steps.

As shown below, check Enable the TBS kernel inspector debugging feature and restart Weixin.

(2) Start debugging

Use the USB cable to link the mobile device to the PC or Mac. Then open the "Mobile Debugging" tab in the Weixin Web DevTools. Select the X5 Blink debugging feature and a new window will open. Open any website from within Weixin to begin debugging. For more information on the X5 Blink kernel, see the official introduction.

After completing the preparation, you will be able to view the basic information of the current device in the window:

Click inspect on any page and a new window will open with the similar debugging interface:

Click the "mobile phone" icon in the upper right corner to enable screen mapping:

The mobile debugging capabilities of the Weixin Web DevTools are based on weinre with some improvements, and offer two advantages over using weinre directly:

You don't have to manually add weinre debug scripts to the page
You can view the full HTTP request log in weinre's network request page, not limited to Ajax requests

As shown in the figure below:

Note: The debugging feature is not supported for HTTPS requests.

#Chrome DevTools

The Weixin Web DevTools integrates the Chrome DevTools and offers the same debugging experience as on PC, allowing you to get started quickly.

As shown in the figure below:

# Download Address

Latest version: (2016.05.19) 0.7.0

Updates:

Added JSSDK debugging support for cards and coupons
Fixed network errors in some cases
Fixed JSSDK authentication failure in some cases
Other UX optimizations and bug fixes

For 64-bit Windows: Download address

 MD5: 2e054987a0dabc967a39f2f0a4949e2b

For 32-bit Windows: Download address

 MD5: 956946b0c0b19532ee622d38968effbf

For Mac: Download address

 MD5: f078bc88cf433d0b73f4b2aded9bec65

Note: It is supported on Windows XP, Windows 7 or above and OSX 10.8 or above

# Technical Support and Feedback

Weixin Web DevTools Feedback

Describe the problem concisely and explain the problem scenario clearly. Attach screenshots as needed. The Weixin team will process your feedback as soon as possible.
Attach the Weixin Web DevTools log file. You can find the log file at the following path after closing the debugging tool and send it as an attachment:

For Windows OS

C:\Users<Username>\AppData\Local\WeChat web DevTools\User Data\WeChat web DevTools.log

For Mac OS

/Users/<Username>/Library/Application Support/WeChat web developer tool/WeChat web DevTools.log