页面预览

华为云码道（CodeArts）代码智能体IDE集成了浏览器功能，您可直接在华为云码道IDE中查看Web应用的运行效果，并执行以下操作：

在浏览器地址栏中输入外部网址，即可预览对应网站。
支持选择一个或多个元素，可将浏览器中选中的内容添加到对话窗口中。
支持在控制台查看浏览器打印日志，并且您可以复制日志内容到聊天对话窗口。

约束与限制

预览功能目前仅适用于华为云码道IDE开发工具。

基于外部网站内容生成新页面

参考IDE中操作，登录华为云码道。

如果没有正常显示华为云码道的聊天窗口，请在顶部菜单栏的右上方，单击展开AI侧栏图标，即可打开华为云码道。
在聊天界面的输入框下方选择“智能体”，切换到智能体模式。右侧显示当前选用的模型，您可在下拉框中切换不同大语言模型。
打开外部网站。

在聊天界面的输入框中，输入需要执行的指令，单击发送图标，即可成功打开目标网站。

图1 打开目标网页

如果您想预览其他网页，只需在浏览器地址栏中输入网址，然后单击，即可快速打开对应网站。
基于外部网页中元素，生成新页面。
1. 在聊天界面的输入框中，输入如下指令，单击发送图标。
```
在当前工程的demo文件夹下为浏览器中内容创建一个搜索页面，并使用node-server启动预览，全部接受并运行
```
2. 收到指令后，任务将自动启动。智能体会引导您逐步确认各项操作。
  图2 确认操作
  - 每次询问：智能体在执行操作前，会向用户发送确认提示。用户需手动单击“运行本次”后，操作才会继续。此模式提供最高的操作安全性，防止误操作。
  - 始终允许并开启配置：启用此配置后，智能体将自动放行所有同类请求，不再发送确认提示。适用于对执行效率要求较高、且完全信任智能体操作的场景。
  - 跳过所有未运行工具：单击此按钮，智能体将忽略当前未执行（或未运行）的工具调用，直接跳过至后续步骤。适用于无需执行中间工具、希望快速推进流程的场景。
  - 运行本次：单击此按钮，允许智能体继续执行当前的操作指令或后续步骤。适用于确认当前步骤无误，希望智能体自动完成剩余任务的情况。
3. 执行完成后，在“资源管理器”中展开文件夹demo，将鼠标放生成的“***.html”文件上，单击右键选择“在浏览器中预览”。
  图3 生成的搜索页效果
4. 在地址栏输入外部网站链接，单击选择元素图标，从页面中选取所需信息。
  图4 选择待添加的元素
5. 在聊天界面的输入框中，输入如下指令，单击发送图标，等待执行完成查看效果。
```
将文档热搜的内容适配到当前工程搜索页面并预览生成后的页面
```
  图5 搜索内容已添加

调整项目内页面元素

参考IDE中操作，登录华为云码道。

如果没有正常显示华为云码道的聊天窗口，请在顶部菜单栏的右上方，单击展开AI侧栏图标，即可打开华为云码道。
在“资源管理器”中展开文件夹，将鼠标放在“***.html”格式的文件上，单击右键选择“在浏览器中预览”。
优化项目页面中的元素。选中目标元素，根据设计需求对尺寸、位置、样式或层级进行优化调整，确保页面布局美观、结构合理、用户体验流畅。
1. 在打开的浏览器页签中，单击选择元素图标。
2. 单击待添加的元素，元素会被添加到聊天界面的输入框中。
  图6 添加一个元素
3. 在聊天界面的输入框中，输入指令如“请将选中元素的字体颜色设置为蓝色”，单击发送图标。
  执行完成后，您会看到所选元素的字体颜色已变为蓝色。
  
  图7 颜色修改效果
元素卡片布局美化。在打开的浏览器页签中，单击选择元素图标。将鼠标放在对应的元素上，单击“卡片布局美化”，即可对选中元素进行布局美化。

图8 单击卡片布局美化
一键美化页面。在打开的浏览器页签中，单击一键美化图标，选择“美化页面”，即可自动优化当前页面的视觉呈现。

图9 一键美化页面
一键美化项目中所有文件。在打开的浏览器页签中，单击一键美化图标，选择“美化项目”，即可自动优化当前工程中所有页面的视觉呈现。

图10 一键美化项目中所有文件