Skip to main content

​
Introduction

The H5 micro app debugging tool is a new H5 micro app debugging tool released by the DingTalk Open Platform. On the debugging page, view the Elements, Console, Network, and AppLog of a running app. Its functions are similar to Chrome DevTools.

​
The H5 Micro App Debugging Tool Currently Supports the Following Features

  • Debug tags and styles
  • Print debugging statements and run commands
  • View network requests
  • View JSAPI calls

​
Workflow

Follow the steps below to debug with the H5 micro app debugging tool.
  1. Sign in to the Developer Backend, then go to the target App Details page.
  2. On the App Details page, click Development Management, then select Development Tools, and click Generate Dedicated Debugging Tool.
  3. Follow the on-screen prompts to open the debugging tool page.
  4. Copy the dedicated debugging code for this app, then add the code to the <header></header> tag of the micro app.
  5. Start debugging. The debugging page is shown below:

​
FAQ

​
Q: The DevTools debugging tool is not connected or has been disconnected. Refresh the DevTools debugging tool, then refresh the current page.

A: Make sure to open the DevTools debugging tool page first, and then open the micro app page. A: For the same DevTools debugging tool link, only one page can debug with it at a time. Click the Generate Debugging Tool button again to generate a new DevTools debugging tool link.

​
Q: An error occurs when debugging JSAPI: [No permission info for action: xxx].

A: Refer to <https://www.npmjs.com/package/dingtalk-jsapi> to initialize before calling JSAPI.

​
Q: An error occurs when debugging JSAPI: [The current micro app is not in your organization].

A: Create a new H5 micro app for debugging, and enter the ip:port of the current micro app in the Home page URL of the newly created app.

​
Q: The request header and response header are missing during a network request.

A: The missing request header is related to the browser’s Safety Policy. For the missing response header, check whether the API response header is configured with the Access-Control-Expose-Headers field.

​
Contact Us

If you encounter any issues or have suggestions while using the H5 micro app debugging tool, join the DingTalk Design CLI Q&A Group for support:
  • Search for the group number in DingTalk: 31929495.
  • Scan the following QR Code with DingTalk on your phone.