> ## 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.

# How to Debug JavaScript on YiDA Pages

> Learn how to debug JavaScript and React code on YiDA pages, including how to use Chrome, React Devtools, and debug JS code written in the action panel.

## 1. Background

Before you learn how to debug YiDA pages, keep the following in mind:

1. YiDA is currently built on the JavaScript ecosystem.
2. YiDA is currently built on the React ecosystem.
3. YiDA's component system is currently based on Fusion, an open-source component library from Alibaba Group.

## 2. Debug JavaScript

Chrome is the recommended browser for debugging code.

For step-by-step guidance, refer to this [article (English)](https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn) or this [article (Chinese)](https://zh.javascript.info/debugging-chrome).

## 3. Debug React

Debug with [React Devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).

For detailed instructions, see [this article](https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html).

## 4. Debug JS Code Written in the Action Panel

(1) Open the developer console. On macOS, press Cmd + Option + I, or right-click and select "Inspect". On Windows, press F12, or right-click and select "Inspect".

(2) Add the `debugger` keyword in your code to set a breakpoint for console debugging.

(3) On mobile devices, use `alert()` to display values for troubleshooting.

(4) If an error appears in the console, click `page.js` to enter source code debugging directly.

(5) In the console, press Cmd/Ctrl + P and search for `page.js` to enter source code debugging.

(6) For more debugging methods, see [https://developers.aliwork.com/docs/guide/concept/debug](/open/yida/guide/concept/debug).