Midscene.js调试神器：可视化报告与Playground使用教程

还在为自动化脚本调试头疼？Midscene.js提供的可视化报告与Playground工具链，让AI驱动的浏览器操作调试变得前所未有的简单直观。本文将带你掌握这两个核心工具的使用方法，大幅提升自动化脚本开发效率。

项目概述

Midscene.js是一个基于视觉语言模型的自动化操作框架，支持Web、Android和iOS等多平台，通过AI驱动界面操作。其核心优势在于：

• 视觉驱动：无需DOM或语义标记，直接通过视觉识别定位元素
• 多平台支持：Web、Android、iOS全平台覆盖
• 调试友好：提供可视化报告和Playground工具简化调试流程

项目主页：README.md

可视化报告工具详解

可视化报告是Midscene.js提供的强大调试工具，能够记录并展示自动化脚本执行的完整过程。

核心功能与界面组成

可视化报告工具位于apps/report/src/App.tsx，主要由以下组件构成：

• 时间线(Timeline)：展示脚本执行的完整步骤序列
• 详情面板(DetailPanel)：显示当前步骤的详细信息
• 侧边详情(DetailSide)：展示元素识别和AI决策过程
• 播放器(Player)：支持执行过程的回放功能

报告生成与使用流程

1. 生成报告：在自动化脚本执行时添加报告生成代码

   const { Midscene } = require('@midscene/core');
   const agent = new Midscene();
   // 执行自动化操作...
   agent.generateReport('execution-report.html');
   

2. 查看报告：直接在浏览器中打开生成的HTML文件

3. 分析报告：

   • 使用时间线定位问题步骤
   • 查看AI决策过程和元素识别结果
   • 通过播放器回放执行过程

高级功能

• 全局预览：GlobalHoverPreview提供元素悬停预览
• 分组查看：支持按测试用例或模块分组查看执行结果
• 性能分析：展示各步骤执行时间，帮助识别性能瓶颈

Playground交互环境

Playground是Midscene.js提供的交互式开发环境，位于apps/playground/src/App.tsx，支持实时编写和测试自动化脚本。

环境搭建与启动

1. 克隆项目：

   git clone https://gitcode.com/GitHub_Trending/mid/midscene
   cd GitHub_Trending/mid/midscene
   

2. 安装依赖：

   npm install
   

3. 启动Playground：

   npm run dev:playground
   

4. 访问界面：打开浏览器访问 http://localhost:3000

界面功能介绍

Playground界面采用分栏布局：

• 左侧面板：代码编辑区，支持JavaScript和YAML两种脚本格式
• 右侧面板：ScreenshotViewer，实时显示界面截图和元素识别结果

基本使用方法

1. 选择目标平台：Web、Android或iOS

2. 编写脚本：

   // 示例：在网页中搜索内容
   await agent.goto('https://www.example.com');
   await agent.aiType('搜索关键词', '搜索框');
   await agent.aiClick('搜索按钮');
   

3. 执行脚本：点击"Run"按钮执行脚本

4. 查看结果：在右侧面板查看执行结果和界面截图

高级特性

• 环境配置：支持模型选择和参数配置
• 代码模板：提供常用操作的代码模板
• 实时调试：执行过程中实时显示AI决策和元素识别结果

实际案例：调试元素识别问题

假设我们遇到一个按钮点击失败的问题，可以通过以下步骤调试：

1. 生成详细报告：确保启用详细日志记录

   agent.setConfig({ logLevel: 'verbose' });
   

2. 在报告中定位问题步骤：查看时间线中失败的点击操作

3. 分析AI决策过程：在侧边详情面板中查看：

   • AI识别到的元素列表
   • 元素匹配分数
   • 决策依据

4. 在Playground中测试修复方案：

   • 复制问题步骤到Playground
   • 调整选择器或添加更明确的描述
   • 实时测试修改效果

5. 应用修复：将验证通过的解决方案应用到实际脚本中

总结与最佳实践

报告工具最佳实践

• 定期生成报告：即使脚本正常运行，也建议生成报告进行分析
• 对比分析：保留不同版本脚本的报告，便于对比分析
• 关注性能：通过报告识别执行缓慢的步骤并优化

Playground使用技巧

• 模块化开发：将复杂脚本拆分为小模块在Playground中单独测试
• 参数调优：在Playground中尝试不同的模型参数和配置
• 环境隔离：使用不同的环境配置测试跨环境兼容性

相关资源

• API文档：官方API参考
• 示例项目：midscene-example
• 社区支持：Discord

通过Midscene.js的可视化报告和Playground工具，你可以大幅提升自动化脚本的开发效率和调试能力。立即尝试这些工具，体验AI驱动的自动化开发新方式！

如果觉得本文对你有帮助，请点赞、收藏并关注项目更新。下一篇我们将介绍Midscene.js的高级AI模型配置技巧。