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

# 如何调试宜搭页面 JS

> 学习如何在宜搭页面上调试JavaScript和React代码，包括使用Chrome、React Devtools以及在动作面板里编写的JS代码的调试方法。

## 1. 前景提要

在学习如何调宜搭页面之前，你需要知道：

1. 宜搭目前是基于 JavaScript 体系开发的
2. 宜搭目前是基于 React 体系开发的
3. 宜搭的组件体系目前是基于阿里巴巴开源的组件库 Fusion

## 2. 调试 JS

推荐通过 Chrome 来默认调试我们的代码

具体的调试方式，推荐通过这篇 [文章（英文）](https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn) 或 [文章（中文）](https://zh.javascript.info/debugging-chrome) 引导入门

## 3. 调试 React

通过 [React Devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 进行调试

具体的调试方法可以参考[这篇](https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html)文章

## 4. 调试动作面板里编写的 JS 代码

（1）打开控制台可以使用，macOS: cmd + option + i 或者右键 「检查」; Window: F12 或者右键 「检查」

（2）代码里添加 debugger 关键字，这样在控制台可以进行断点调试

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1620715457553-ab4b17f0-7006-45af-837e-001cd57a377e.png)
</Frame>

（3）在移动端也可以进行 alert() 来提示排查数据

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1620715425581-c469d958-2d95-4d89-9a1f-c2c56288acd1.png)
</Frame>

（4）如果控制台有报错，可以直接点击 page.js 进入源码调试

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618571041863-9f7b4ca5-79f3-4565-8668-3c0ce235d08e.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1620715373330-2cc3680a-5f7c-4867-b3ee-b08913d10a6c.png)
</Frame>

（5）在控制台可以通过 cmd/ctrl + p，搜索 page.js 一样可以进入源码调试

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1620715480508-299acf88-34a8-4143-b3be-cc5f7e39b8bf.png)
</Frame>

（6）更多调试方式：[https://developers.aliwork.com/docs/guide/concept/debug](/zh/open/yida/guide/concept/debug)