---
title: ​用 Storybook 调试组件
---

前几个小节中，我们已经开发了一个简单的 UI 组件。组件开发完后，一般我们需要对它进行调试。

除了可以直接在项目中进行调试以外，我们还可以使用 [**Storybook**](https://storybook.js.org/) 进行调试。

Modern.js 提供了开箱即用的 Storybook 能力，可以识别 MWA 项目下 Story 文件。

我们执行 `pnpm run new`，启用该模式：

```bash
# 启用可选功能
  ...
  启用「单元测试 / 集成测试」功能
❯ 启用「Visual Testing (Storybook)」模式
```

安装成功后，我们需要为我们的组件添加 Story 文件。

:::info 补充信息
Story 文件是指 `*.stories.[t|j]sx?` 格式的文件。
:::

这里我们为 `Avatar` 组件 添加 `src/components/Avatar/index.stories.tsx` Story 文件。

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="macOS" label="macOS" default>

```bash
touch src/components/Avatar/index.stories.tsx
```

</TabItem>
<TabItem value="Windows" label="Windows">

```powershell
ni src/components/Avatar/index.stories.tsx
```

</TabItem>
</Tabs>

内容如下：

``` javascript
import Avatar from '.';

export const DanielTaylorAvatar = () => (
  <Avatar src="https://avatars.dicebear.com/v2/identicon/Daniel Taylor.svg" />
);

export default {
  title: 'Avatar Demo',
};
```

然后我们启动 Storybook 调试：

``` bash
pnpm run dev story
```

然后我们可以看到如下界面：

![storybook demo](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/mwa-storybook-demo.png)

如果需要配置 Storybook，则需要在 [`config/storybook/**`](/docs/apis/hooks/mwa/config/storybook) 目录下进行配置。

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c06/hello-modern-5)。