页面预览

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

外部网址即时预览：在浏览器地址栏中输入外部网址，即可预览对应网站。
选中内容一键导入对话：支持选择一个或多个元素，可将浏览器中选中的内容添加到对话窗口中。
元素直连智能体交互：选中元素即可一键发送至会话，直接与智能体对话。
控制台日志实时查看与复用：支持在控制台查看浏览器打印日志，并且您可以复制日志内容到聊天对话窗口。
支持拖拽式元素移动：选中元素后，可通过鼠标拖拽直观调整其位置。
设计与CSS双向编辑：支持在设计界面与CSS代码层直接修改元素属性。
元素级评论功能：通过添加评论，将样式优化需求精准绑定到对应元素。

调整项目内页面元素

参考快速启动中操作，登录华为云码道。

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

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

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

图7 一键美化项目中所有文件
通过CSS检查器优化页面。在打开的浏览器页签中，单击CSS检查器图标，选择目标元素，即可在组件树和设计面板中对选中的元素进行修改。

在组件树中，将鼠标悬浮在目标元素上，单击右键，可复制、剪切、粘贴和删掉元素。您也可以拖拽元素，将元素拖拽到其他组件树节点下。
图8 在组件树中修改元素

在设计面板中，您可以对元素进行可视化编辑，如调整位置、布局、文本、背景和边框等。也可以在CSS中，查看或编写对应的CSS样式规则。

在“设计 > 文本”中设置字体时，请手动输入您本地已安装的字体名称。

图9 在设计/CSS中修改元素
通过添加评论优化页面。通过添加评论，将样式优化需求精准绑定到对应元素。智能体基于评论指令执行局部优化，实现精准修改，显著降低沟通成本与返工率。
1. 在打开的浏览器页签中，单击评论图标。
2. 框选您需要添加评论的内容，输入优化提示词，单击“添加评论”。
  如图10所示，系统会通过气泡方式暂存您的评论，鼠标悬停在气泡，可查看您的评论范围和内容。您也可以直接单击“立即提交”，智能体会根据您提交的评论，对页面进行优化。
3. 再次框选您需要添加评论的内容，输入优化提示词，单击“添加评论”。
4. 评论添加完成后，单击“提交”，智能体即会根据您所添加的评论，对页面进行优化。
  如果需要批量取消暂存您的评论，请单击右上角的“取消”。若需撤销最近一次操作，可单击撤销按钮。
  
  最多只支持添加5条评论。
  
  图10 通过评论对页面进行优化
多终端预览页面。页面开发完成后，支持在多个终端预览页面效果。
1. 在打开的浏览器页面中，单击设备工具栏图标，打开设备工具栏。
2. 选择终端设备，查看页面效果。
  图11 选择预览页面的设备

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

参考快速启动中操作，登录华为云码道。
在聊天界面的输入框下方选择“智能体”，切换到智能体模式。右侧显示当前选用的模型，您可在下拉框中切换不同大语言模型。

如果没有正常显示华为云码道的聊天窗口，请在顶部菜单栏的右上方，单击展开AI侧栏图标，即可打开华为云码道。
打开外部网站。

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

图12 打开目标网页

如果您想预览其他网页，只需在浏览器地址栏中输入网址，然后单击，即可快速打开对应网站。
基于外部网页中元素，生成新页面。
1. 在聊天界面的输入框中，输入如下指令，单击发送图标。
```
在当前工程的TestDemo_01文件夹下为浏览器中内容创建一个搜索页面，并使用node-server启动预览，全部接受并运行
```
2. 执行完成后，在“资源管理器”中展开文件夹demo，将鼠标放在生成的“***.html”文件上，单击右键选择“在浏览器中预览”。
  图13 生成的搜索页效果
3. 在地址栏输入外部网站链接，单击选择元素图标，从页面中选取所需的元素。
  图14 选择待添加的元素
4. 在聊天界面的输入框中，输入如下指令，单击发送图标，等待执行完成查看效果。
```
将文档热搜的内容适配到当前工程搜索页面并预览生成后的页面
```
  图15 搜索内容已添加