Skip to main content

Dev Mode 代码编辑器

Dev Mode 是 AI Builder 提供的高级代码编辑环境，允许开发者直接编辑生成的代码，进行深度定制和高级功能开发。

概述​

Dev Mode 为有编程经验的用户提供了完整的代码编辑能力，您可以：

  • 📝 直接编辑代码：修改前端、后端和数据库代码
  • 🔧 添加自定义功能：实现 AI 无法生成的复杂逻辑
  • 🐛 调试和优化：进行代码调试和性能优化

进入 Dev Mode​

启动方式​

在会话中点击右上角「Dev Mode」滑块按钮，即可进入 Dev Mode 代码编辑器。

环境准备​

进入 Dev Mode 前，系统会自动：

  • 生成完整的项目代码结构
  • 配置开发环境和依赖
  • 启动本地开发服务器
  • 同步云端资源配置

代码编辑器界面​

主要区域​

  1. 文件浏览器：项目文件目录树
  2. 代码编辑区：主要的代码编辑界面
  3. 终端控制台：命令行操作和日志输出
  4. 预览窗口：实时预览应用效果
  5. 调试面板：断点调试和变量监控

编辑器特性​

  • 语法高亮：支持多种编程语言
  • 智能补全：代码自动补全和提示
  • 错误检查：实时语法和逻辑错误检查
  • 代码格式化：自动代码格式化和美化
  • 快捷键支持：丰富的编辑快捷键

项目结构​

⚠️ 在线编辑重要提示：可编辑范围

支持保存的文件：

  • src/components/ 目录下的组件（不包括 ui 子目录）
  • src/page/ 目录下的页面文件 其他文件也可修改调试，但不会同步到 AI ，您可以下载代码获取编辑器内的修改。

文件保存

编辑完成后，必须点击右上角切回 Agent 模式，否则在退出后所有修改都将被舍弃！

支持编辑的前端项目结构​

├── src/
│   ├── components/     # 组件目录
│   ├── pages/         # 页面目录

后端项目结构​

├── /
├── .datasources/     # 数据模型目录
├── .functions/     # 云函数目录

调试和测试​

环境要求​

  • Node.js (推荐 16.x 或更高版本)
  • Yarn 包管理器

安装依赖​

# 安装 yarn (如果尚未安装)
npm install -g yarn

# 安装项目依赖
yarn install

启动开发服务器​

yarn run dev

启动后，项目将在本地开发服务器上运行，通常可以通过 http://localhost:8080 或其他端口访问。

下一步​

完成代码开发和调试后，可以进行资源发布：

🚀 开始资源发布 →

或者如果需要版本管理，可以先设置 Git：

📝 配置 Git 管理 →