Dev Mode 使用指南（功能灰度中）#

什么是 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个工作日完成审核。

  

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

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

  

• 修改后同步方式：

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

  

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

  

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

  

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 模式的切换。

Dev Mode 内如何对话#

1.侧边栏对话#

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

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

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

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

2.编辑区内对话#

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

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

1.手动选中元素修改#

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

2.侧边栏对话修改#

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

3.编辑区内对话修改#

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