> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Micro App Debugging Tool—Web Version (Not Recommended)

> This article introduces the H5 micro app debugging tool and how to use it.

## 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](https://open-dev.dingtalk.com/), 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.

### Q: Another client is already debugging through the same DevTools link. Generate a new DevTools debugging link.

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>](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.