页面预览

约束与限制

预览功能目前仅适用于CodeArts代码智能体IDE开发工具。

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

1. 参考IDE中操作，登录CodeArts代码智能体。
2. 单击IDE顶部菜单栏中的切换辅助侧栏图标 ，打开CodeArts代码智能体聊天窗口。
3. 在聊天界面的输入框下方选择“智能体”，切换到智能体模式。
4. 打开外部网站。
   1. 在聊天界面的输入框中，输入需要预览的网页链接，单击发送图标 。
      图1 输入需要浏览的网页
      
   2. 单击“接受”，即可在浏览器中预览网页。
      图2 单击接受
      
      图3 预览目标网页
      
   3. 如果您想预览其他网页，只需在浏览器地址栏中输入网址，然后单击 图标，即可快速打开对应网站。
      图4 打开其他网站
      

5. 基于外部网页中元素，生成新页面。
   1. 在聊天界面的输入框中，输入如下指令，单击发送图标 。

      在当前工程的doc-demo文件夹下为浏览器中内容创建一个搜索页面，并使用node-server启动预览，全部接受并运行

   2. 在“资源管理器”中展开文件夹doc-demo，将鼠标放生成的“***.html”文件上，单击右键选择“打开预览”。
      图5 生成的搜索页效果
      
   3. 在地址栏输入外部网站链接，单击选择元素图标 ，从页面中选取所需信息。
      图6 选择待添加的元素
      
   4. 在聊天界面的输入框中，输入如下指令，单击发送图标 ，等待执行完成查看效果。

      将文档热搜的内容适配到当前工程搜索页面并预览生成后的页面

      图7 搜索内容已添加
      

调整项目内页面元素

1. 参考IDE中操作，登录CodeArts代码智能体。
2. 单击IDE顶部菜单栏中的切换辅助侧栏图标 ，打开聊天窗口。
3. 在“资源管理器”中展开文件夹，将鼠标放在“***.html”格式的文件上，单击右键选择“打开预览”。
4. 在打开的浏览器页签中，单击选择元素图标 。
5. 单击待添加的元素，元素会被添加到聊天界面的输入框中。
   图8 添加一个元素
   

6. 在聊天界面的输入框中，输入指令如“请将选中元素的字体颜色设置为红色”，单击 图标。

   执行完成后，您会看到所选元素的字体颜色已变为红色。

   图9 颜色修改效果
   

相关操作

在浏览器中，单击地址栏后的打开开发者工具图标 ，即可启动开发者工具。如果当前项目中存在Info、Warnings或Errors类型的日志，相关信息会实时显示在工具中。您可将日志内容复制并粘贴到CodeArts代码智能体中，快速获取问题分析与解决方案。