Rust-headless-chrome 中捕获 JavaScript 控制台日志的解决方案

在 Rust-headless-chrome 项目中，开发者经常需要捕获网页中 JavaScript 代码执行时产生的控制台日志。然而，许多开发者发现直接使用 LogEntryAdded 事件无法正常工作。本文将深入分析这个问题并提供可靠的解决方案。

问题现象

当开发者尝试通过以下方式监听 JavaScript 控制台日志时：

1. 启用运行时和日志功能
2. 添加 LogEntryAdded 事件监听器
3. 执行包含 console.log 等方法的 JavaScript 代码

发现 LogEntryAdded 事件不会被触发，导致无法捕获控制台输出。

根本原因

经过分析，这是由于 Chrome DevTools Protocol 的工作机制决定的。在较新版本的 Chrome 中，控制台日志实际上是通过 Runtime 域而非 Log 域发送的。因此，我们需要监听 RuntimeConsoleAPICalled 事件而非 LogEntryAdded 事件。

解决方案

正确的实现方式如下：

// 启用 Runtime 功能
tab.enable_runtime().unwrap();

// 添加事件监听器
tab.add_event_listener(Arc::new(move |event: &Event| match event {
    Event::RuntimeConsoleAPICalled(event) => {
        // 处理控制台输出
        if let Some(value) = event.params.args.get(0).and_then(|arg| arg.value.as_ref()) {
            if let Some(message) = value.as_str() {
                println!("[控制台 {:?}] {}", event.params.Type, message);
            }
        }
    }
    _ => {}
})).unwrap();

// 执行包含 console 调用的 JavaScript 代码
let jcode = r#"
(async () => {
    console.log("普通信息");
    console.warn("警告信息");
    console.error("错误信息");
})();
"#;

tab.evaluate(jcode, true).unwrap();

实现细节解析

1. Runtime 域启用：必须调用 enable_runtime() 方法才能接收 Runtime 相关事件

2. 事件处理：

   • RuntimeConsoleAPICalled 事件包含完整的控制台信息
   • 通过 params.Type 可以区分日志级别（log/warn/error等）
   • 日志内容存储在 params.args 数组中

3. 错误处理：

   • 添加了安全的链式调用，避免 unwrap 可能导致的 panic
   • 正确处理了可能为空的字段

注意事项

1. Chrome 版本兼容性：不同版本的 Chrome 可能有不同的行为表现

2. 性能考虑：频繁的控制台输出可能影响性能，建议在生产环境中适当过滤

3. 日志级别处理：可以根据 Type 字段实现不同级别的日志处理逻辑

4. 多参数处理：console.log 支持多个参数，实际开发中可能需要处理 args 数组中的所有参数

替代方案比较

如果这个方案不能满足需求，开发者也可以考虑以下替代方案：

1. chromiumoxide：另一个 Rust 的 Headless Chrome 实现，可能有不同的 API 设计

2. 自定义日志注入：在 JavaScript 代码中实现自定义的日志收集机制

3. 页面内容解析：通过 DOM 操作获取特定元素中的日志信息

总结

在 Rust-headless-chrome 项目中捕获 JavaScript 控制台日志时，正确的做法是监听 RuntimeConsoleAPICalled 事件而非 LogEntryAdded 事件。本文提供的解决方案经过了实践验证，能够可靠地捕获各种级别的控制台输出。开发者可以根据实际需求调整日志处理逻辑，构建更强大的网页自动化工具。