---
title: Devtool
description: 通过浮动开发界面检查和编辑词典。
order: 30
toc:
  - id: mount-the-devtool
    title: 挂载 Devtool
  - id: theme-and-language
    title: 主题与语言
  - id: custom-surfaces
    title: 自定义界面
---

## 挂载 Devtool {#mount-the-devtool}

将 Devtool 挂载在 `I18nProvider` 内，并且只在开发环境启用：

```tsx
import { I18nDevtool } from "@workspace/i18n/devtool"

{
  import.meta.env.DEV && (
    <I18nDevtool locale="zh-Hans" dark={'[data-theme="dark"]'} />
  )
}
```

组件通过 Portal 渲染，因此不会被应用的 overflow 或层叠上下文裁剪。

## 主题与语言 {#theme-and-language}

`dark` 选项接受类名或 CSS 选择器。控制面板语言独立于被翻译的应用语言，支持 `en-US` 和 `zh-Hans`，并会从 `navigator.languages` 回退到 `en-US`。

## 自定义界面 {#custom-surfaces}

当应用需要替换默认浮动面板时，可使用 `MessagePanel`、`MessageRepositoryProvider` 和 `createHttpMessageRepository` 构建自定义开发界面。