什么是 Dev Mode？

Dev Mode 是 NoCode 平台提供的在线代码编辑功能，支持对已创建作品进行代码级别的深度定制。通过该模式，可直接查看和编辑您 NoCode 作品完整的代码，实现高级功能拓展。

Dev Mode 的适用场景

  1. 简单的细节修改 想修改一些细节，如调整文字、添加图片链接、调整简单样式等，可切换至 Dev Mode 后，直接修改代码。
  2. 反复沟通实现不了的 如果反复和模型沟通，但是实现效果均不太理想的；或者模型自己修复不好的问题，可以切换至 Dev Mode，用自带的三种模式进一步调整。
  3. 专业工程师 想查看作品的代码结构、全量代码；可以自己修改代码，直接编程的；直接切换至 Dev Mode，使用工程师更熟悉的代码编辑功能。

Dev Mode 的使用方式

  • 开启功能：Dev Mode 为新推出的 Pro 版本功能，我们将灰度为用户开放，如需体验可提交功能申请；
    申请方式：在对话页面的右上角，点击 Dev Mode 功能后，可填写信息提交申请，团队将在1个工作日完成审核。

    Dev Mode 功能入口

  • 启用方式：在 NoCode 作品编辑页右上角点击「Dev Mode」按钮。

    目前功能处于灰度试用阶段，如果已经为您开放了功能，则系统将加载并展示作品的完整代码结构；若您点击后显示申请页面，则需填写信息后，待系统为您开放功能后，再点击启用。

    入口

  • 修改后同步方式：

    1. 在 Dev Mode 页面内修改代码后，可在 Dev Mode 内直接切换至「NoCode预览」查看效果；

    进入

    1. 符合预期后，直接点击「Dev Mode」按钮，切换回 NoCode 页面；

    切换回

    1. 回到 NoCode 页面，点击右下交的保存，生成新版本并更新内容。

    草稿

注意事项

场景一：提交 commit 但未 push 代码时退出 Dev Mode

问题描述：当你提交了 commit 却未将代码 push 到远程仓库，此时退出 Dev Mode，有内容丢失的风险。

解决建议：避免手动提交 commit，修改后可以直接切换回 NoCode 模式，让系统自动处理 commit 与代码提交操作。

场景二：提交 commit 并 push 代码后退出 Dev Mode

问题描述：若你提交了 commit 并将代码 push 到远程仓库，之后退出 Dev Mode，NoCode 不会生成新的版本，而是直接修改当前版本的内容，这会导致无法回退到代码修改前的上一个版本。

解决建议：若希望保证修改内容与版本可对应，建议不要自行提交 commit 与代码。

Dev Mode 内的三种模式

1.模式介绍

  • Ask：根据用户的 Prompt 生成回答，不主动 apply 代码。推荐用于代码编写过程中的代码理解问答及单文件的代码生成，避免在代码 apply、回退等场景下的操作复杂性。

  • Edit：根据用户的 Prompt 生成回答，回答中若包含确认路径的代码，将自动 apply，且支持回退代码版本。推荐用于代码生成场景。

  • Agent：根据用户的 Prompt 执行任务，包含生成代码、终端执行等。推荐用于复杂任务执行场景。

2.模式切换

  • 顶部 Chat 的 tab 内包含了 ask 和 edit 模式；顶部 Agent 的 tab 内为 Agent 模式。

  • Chat 和 Agent 模式切换：点击顶部的 Chat、Agent 可分别切换到对应模式。

  • Ask 和 Edit 模式切换：顶部在 Chat 模式下时，当未开始对话时，可点击输入框内的“ask/edit”进行 ask 和 edit 模式的切换。

1

Dev Mode 内如何对话

1.侧边栏对话

  • 对话时，可通过点击输入框上方的“+”或者在输入框内输入“@”的方式添加代码文件为上下文。

  • 对话生成代码后，可通过以下方式应用和采纳代码：

    • Edit 和 Agent 模式将会自动应用代码，无需手动 apply 代码到代码文件中，若确认修改可用，可点击 Accept 进行采纳。

    • Ask 模式将不会自动应用代码，可点击代码块上 或 输入框上方生成代码的文件 list 中的 apply 按钮手动进行 apply，若确认修改可用，可点击 Accept 进行采纳。

2

2.编辑区内对话

  • 如果明确知道应该修改哪段代码，且需要模型帮忙修改，则可以在编辑区内选中代码后，点击“Edit”按钮唤起编辑区内的对话框，生成的代码将自动应用到编辑区的代码中。

3

Dev Mode 内如何快速修改页面元素

1.手动选中元素修改

左侧预览窗口中，点击窗口右上角的“Edit”按钮切换至元素选择模式，点击页面内的元素可将该元素插入到侧边栏 Agent 对话中作为上下文，之后在 Agent 模式下，描述需要修改的页面元素的详细需求，Agent 将自动找到对应代码并修改。

4

2.侧边栏对话修改

直接在 Agent 模式下，描述需要修改的页面元素的详细需求，Agent 将自动找到对应代码并修改。

3.编辑区内对话修改

如果明确知道应该修改哪段代码，且需要模型帮忙修改，则可以在编辑区内选中代码后，点击“Edit”按钮唤起编辑区内的对话框，生成的代码将自动应用到编辑区的代码中。