# 页面预览
华为云码道代码智能体IDE集成了浏览器功能，您可直接在华为云码道代码智能体IDE中查看Web应用的运行效果，并执行以下操作：
- 外部网址即时预览：在浏览器地址栏中输入外部网址，即可预览对应网站。
- 选中内容一键导入对话：支持选择一个或多个元素，可将浏览器中选中的内容添加到对话窗口中。
- 元素直连智能体交互：选中元素即可一键发送至会话，直接与智能体对话。
- 控制台日志实时查看与复用：支持在控制台查看浏览器打印日志，并且您可以复制日志内容到聊天对话窗口。
- 支持拖拽式元素移动：选中元素后，可通过鼠标拖拽直观调整其位置。
- 设计与CSS双向编辑：支持在设计界面与CSS代码层直接修改元素属性。
- 元素级评论功能：通过添加评论，将样式优化需求精准绑定到对应元素。
#### 调整项目内页面元素
1. 参考[快速启动](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0002.html)中操作，登录华为云码道代码智能体IDE。
   
   ![](https://support.huaweicloud.com/usermanual-codeartsagent/public_sys-resources/note_3.0-zh-cn.png)
   如果没有正常显示华为云码道代码智能体的聊天窗口，请在顶部菜单栏的右上方，单击**展开AI侧栏** 图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002577501896.png)，即可打开华为云码道代码智能体。
   
   
2. 在"资源管理器"中展开文件夹，将鼠标放在"\*\*\*.html"格式的文件上，单击右键选择"在浏览器中预览"。
3. **优化项目页面中的元素** 。选中目标元素，根据设计需求对尺寸、位置、样式或层级进行优化调整，确保页面布局美观、结构合理、用户体验流畅。
   
   方式一：通过向对话框添加特定元素实现优化
   1. 在打开的浏览器页签中，单击选择元素图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002629856482.png)。
      图1选择元素   
      ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002649960632.png "点击放大") 
   
   2. 单击待添加的元素，在弹出的菜单中选择添加到对话图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002660175647.png)，即可将元素添加到聊天界面的输入框中。
   
   3. 在聊天界面的输入框中，输入指令如"请将选中元素的字体颜色设置为蓝色"，单击发送图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002660175651.png)。
      执行完成后，您会看到所选元素的字体颜色已变为蓝色。
      
    
   方式二：通过在对话框输入优化指令进行调节
   1. 在打开的浏览器页签中，单击选择元素图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002629856472.png)。
   
   2. 单击待添加的元素，在弹出的菜单中选择对话框图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002629781214.png)。
   
   3. 输入优化关键词，单击发送图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002629856478.png)，智能体即会根据您输入的提示词进行元素优化。
    
   方式三：直接在样式设置中调整视觉样式
   1. 在打开的浏览器页签中，单击选择元素图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002660182649.png)。
   
   2. 单击待添加的元素，在弹出的菜单中选择样式设置图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002660060563.png)。
   
   3. 在样式属性面板中，根据需求进行调整。
    
   
   
4. **元素卡片布局美化。** 在打开的浏览器页签中，单击选择元素图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002608141749.png)。将鼠标放在对应的元素上，单击"一键美化"，即可对选中元素进行布局美化。
5. **一键美化页面。** 在打开的浏览器页签中，单击一键美化图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002607981861.png)，选择"美化页面"，即可自动优化当前页面的视觉呈现。
6. **一键美化项目中所有文件** **。** 在打开的浏览器页签中，单击一键美化图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002607981861.png)，选择"美化项目"，即可自动优化当前工程中所有页面的视觉呈现。
7. **通过CSS检查器优化页面。** 在打开的浏览器页签中，单击CSS检查器图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002627176754.png)，选择目标元素，即可在组件树和设计面板中对选中的元素进行修改。
   
   在组件树中，将鼠标悬浮在目标元素上，单击右键，可复制、剪切、粘贴和删掉元素。您也可以拖拽元素，将元素拖拽到其他组件树节点下。
   在设计面板中，您可以对元素进行可视化编辑，如调整位置、布局、文本、背景和边框等。也可以在CSS中，查看或编写对应的CSS样式规则。
   ![](https://support.huaweicloud.com/usermanual-codeartsagent/public_sys-resources/caution_3.0-zh-cn.png)
   在"设计 \> 文本"中设置**字体**时，请手动输入您本地已安装的字体名称。
   
   
8. **通过添加评论优化页面** 。通过添加评论，将样式优化需求精准绑定到对应元素。智能体基于评论指令执行局部优化，实现精准修改，显著降低沟通成本与返工率。
   
   1. 在打开的浏览器页签中，单击评论图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633561960.png)。
   
   2. 框选您需要添加评论的内容，输入优化提示词，单击"添加评论"。 系统会通过气泡方式暂存您的评论，鼠标悬停在气泡，可查看您的评论范围和内容。您也可以直接单击"立即提交"，智能体会根据您提交的评论，对页面进行优化。
      
   
   3. 再次框选您需要添加评论的内容，输入优化提示词，单击"添加评论"。
   
   4. 评论添加完成后，单击"提交"，智能体即会根据您所添加的评论，对页面进行优化。
      如果需要批量取消暂存您的评论，请单击右上角的"取消"。若需撤销最近一次操作，可单击撤销按钮 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633402058.png)。
      ![](https://support.huaweicloud.com/usermanual-codeartsagent/public_sys-resources/caution_3.0-zh-cn.png)
      最多只支持添加5条评论。
      
   
   
   
   
9. **多终端预览页面** 。页面开发完成后，支持在多个终端预览页面效果。
   
   1. 在打开的浏览器页面中，单击设备工具栏图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002663681139.png)，打开设备工具栏。
   
   2. 选择终端设备，查看页面效果。
   
   
   
   
 
#### 基于外部网站内容生成新页面
1. 参考[快速启动](https://support.huaweicloud.com/usermanual-codeartsagent/codeartsagent_ug_0002.html)中操作，登录华为云码道代码智能体IDE。
2. 在聊天界面的输入框下方选择"智能体"，切换到智能体模式。右侧显示当前选用的模型，您可在下拉框中切换不同大语言模型。 
   ![](https://support.huaweicloud.com/usermanual-codeartsagent/public_sys-resources/note_3.0-zh-cn.png)
   如果没有正常显示华为云码道代码智能体的聊天窗口，请在顶部菜单栏的右上方，单击**展开AI侧栏** 图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633387112.png)，即可打开华为云码道代码智能体。
   
   
3. 打开外部网站。 
   在聊天界面的输入框中，输入需要执行的指令，单击发送图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633387116.png)，即可成功打开目标网站。
   ![](https://support.huaweicloud.com/usermanual-codeartsagent/public_sys-resources/note_3.0-zh-cn.png)
   如果您想预览其他网页，只需在浏览器地址栏中输入网址，然后单击 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002663666195.png)，即可快速打开对应网站。
   
   
4. 基于外部网页中元素，生成新页面。 
   1. 在聊天界面的输入框中，输入如下指令，单击发送图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633387114.png)。
      ```
      在当前工程的TestDemo_01文件夹下为浏览器中内容创建一个搜索页面，并使用node-server启动预览，全部接受并运行
      ```
      
   
   2. 执行完成后，在"资源管理器"中展开文件夹demo，将鼠标放在生成的"\*\*\*.html"文件上，单击右键选择"在浏览器中预览"。
   
   3. 在地址栏输入外部网站链接，单击选择元素图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002633547032.png)，从页面中选取所需的元素。
   
   4. 在聊天界面的输入框中，输入如下指令，单击发送图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002663746249.png)，等待执行完成查看效果。
      ```
      将文档热搜的内容适配到当前工程搜索页面并预览生成后的页面
      ```
      
   
   
   
   
 
#### 相关操作
在浏览器中，单击地址栏后的打开开发者工具图标 ![](https://support.huaweicloud.com/usermanual-codeartsagent/zh-cn_image_0000002577621876.png)，即可启动开发者工具。如果当前项目中存在Info、Warnings或Errors类型的日志（在Console页签单击Custom Levels可查看日志类型），相关信息会实时显示在工具中。您可将日志内容复制并粘贴到华为云码道代码智能体中，快速获取问题分析与解决方案。