如何用Python/Node.js的Selenium访问DevTools性能面板并导出分析结果？

不需要直接操作DevTools性能面板的UI，Selenium支持调用CDP命令来录制性能配置文件并导出结果，以下是Python和Node.js的具体实现方案：

Python 实现步骤及代码 #

1. 初始化ChromeDriver并启用CDP接口
2. 启动性能跟踪会话
3. 执行页面加载操作
4. 停止跟踪并导出性能数据为JSON文件（可直接导入DevTools查看）

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import json

# 配置Chrome启动参数
chrome_options = Options()
chrome_options.add_argument("--start-maximized")

# 启动Chrome并连接CDP
driver = webdriver.Chrome(options=chrome_options)

# 启动性能跟踪，配置采样频率和跟踪类别
driver.execute_cdp_cmd("Tracing.start", {
    "categories": ["devtools.timeline", "blink.user_timing", "v8.execute"],
    "options": "sampling-frequency=1000"
})

# 加载目标页面（替换为你需要测试的URL）
driver.get("https://example.com")

# 停止跟踪并获取完整性能数据
trace_data = driver.execute_cdp_cmd("Tracing.end", {})

# 将数据导出为JSON文件，可直接导入DevTools Performance面板
with open("performance_profile.json", "w") as file:
    json.dump(trace_data, file, indent=2)

driver.quit()

Node.js 实现步骤及代码 #

逻辑和Python一致，通过executeCdpCommand调用CDP的Tracing命令：

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs');

(async function recordPerformanceProfile() {
    // 初始化Chrome驱动
    const driver = await new Builder()
        .forBrowser('chrome')
        .setChromeOptions(new chrome.Options().windowSize({ width: 1920, height: 1080 }))
        .build();

    // 启动性能跟踪
    await driver.executeCdpCommand('Tracing.start', {
        categories: ['devtools.timeline', 'blink.user_timing', 'v8.execute'],
        options: 'sampling-frequency=1000'
    });

    // 加载目标页面
    await driver.get('https://example.com');

    // 停止跟踪并获取数据
    const traceData = await driver.executeCdpCommand('Tracing.end', {});

    // 导出为JSON文件
    fs.writeFileSync('performance_profile.json', JSON.stringify(traceData, null, 2));

    await driver.quit();
})();

补充说明 #

• 导出的JSON文件可直接导入Chrome DevTools的Performance面板（点击面板中的「Load profile」按钮选择文件即可）
• 可通过调整Tracing.start的categories参数，自定义需要收集的性能数据类别，满足不同的分析需求
• 该方案无需依赖DevTools面板UI操作，完全通过代码自动化完成

内容的提问来源于stack exchange，提问作者Daniel Hollander