# 调试模式

调试模式是 Dify Chat 提供的开发调试功能，允许开发者无需进行任何代码改动，也不需要依赖后端服务即可快速配置 API Key ，直连 Dify API 调试应用功能。

## 1. 功能概览

进入调试模式后，你会看到应用列表的初始界面, 页面右下角有一个调试按钮。

![初始界面](/guide__debug_mode_main.png)

点击页面右下角的 "调试按钮"，会打开一个抽屉，抽屉中包含了应用配置的编辑区域，你可以填入 Dify 的 API Base URL 和 API Key 。

![添加应用配置抽屉-填入信息](/guide__debug_mode_data_fulfilled.png)

## 2. 使用场景

调试模式适用于以下场景：

- **本地开发**：在没有后端代理服务的情况下直连 Dify 进行前端开发
- **功能测试**：测试不同应用配置下的界面表现
- **演示展示**：使用模拟数据进行产品演示
- **问题排查**：隔离服务器问题，专注于前端逻辑调试

## 3. 如何开启

要开始调试模式，有两种方案，你可以按需选择。

### 3.1. 直接在 URL 中添加参数

这种方案适合一次性调试的场景，适合临时排查问题或调试应用功能，调试完成后可以直接退出，回到正常的访问模式。

开启方式：在浏览器地址栏的 URL 中添加 `isDebug=true` 参数，例如：

```
http://localhost:5200/dify-chat/?isDebug=true
```

### 3.2. 指定环境变量

这种方案适合长期开启调试模式的场景，不支持退出。

开启方式：在 `packages/react-app/public/env.js` 文件中，将调试模式的开关直接设置为 `'true'`（注意是字符串）, 然后运行 `pnpm --filter dify-chat-app-react build` 重新构建产物即可生效。

```js title="packages/react-app/public/env.js"
window.__DIFY_CHAT_ENV__ = {
	PUBLIC_DEBUG_MODE: 'true',
}
```

如果你是基于 docker compose 构建的，更方便的方式是在 `docker-compose.yml` 中，将 `react-app` 服务的 `PUBLIC_DEBUG_MODE` 变量值改为 `true` 之后重启容器。

```yaml title="docker-compose.yml"
services:
  react-app:
    environment:
      - PUBLIC_DEBUG_MODE=true
```

## 4. 使用说明

> 不论你通过那种方式开启调试模式，所有相关数据均保存在 LocalStorage 和 SessionStorage 中，不会上传到任何第三方服务器，你可以放心使用。

### 4.1. 操作步骤

1. 点击页面左下角的调试按钮
2. 在配置编辑器中输入或修改 JSON 配置
3. 可以点击"使用示例配置"按钮快速填入模板
4. 点击"保存配置"按钮保存设置
5. 页面会自动刷新，应用列表将显示配置的调试应用

### 4.2. 注意事项

- 调试模式仅在开发环境中使用，生产环境不应启用
- 配置数据保存在浏览器本地，清除浏览器数据会丢失配置
- 调试应用的 API 密钥需要是真实有效的，才能正常进行对话

### 4.3. 清除配置

要清除调试配置，可以：

1. 在配置编辑器中点击退出调试按钮，或者清空内容后保存
2. 或者直接在浏览器开发者工具中删除 `__DC__DEBUG_APPS` 键值对
