Puppeteer与VSCode-Debugger融合调试

// test.js
const puppeteer = require('puppeteer');

(async () => {
    // 启动 Chrome，暴露调试端口
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--remote-debugging-port=9222'],
    });

    const page = await browser.newPage();
    await page.goto('http://localhost:5173');

    // 在此处可以设置 debugger 语句
    // 或在 VSCode 中设置断点
    await page.click('#submit');

    await browser.close();
})();

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Puppeteer",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": ["--remote-debugging-port=9222"]
        }
    ]
}

const puppeteer = require('puppeteer-core');

(async () => {
    // 连接到 VSCode 启动的 Chrome
    const browser = await puppeteer.connect({
        browserURL: 'http://127.0.0.1:9222',
    });

    const pages = await browser.pages();
    const page = pages[0];

    // 执行自动化操作
    await page.click('#submit');
    await page.type('#search', 'hello');
})();

// test.js - 使用 debugger 语句触发调试
const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
    });

    const page = await browser.newPage();
    await page.goto('http://localhost:5173');

    // 方式一：在 Puppeteer 脚本中设置断点
    debugger;  // VSCode 会在这一行断住

    // 方式二：在页面中注入 debugger
    await page.evaluate(() => {
        debugger;  // 浏览器中会断住，VSCode 也会捕获
    });

    await browser.close();
})();

// test.spec.js
const puppeteer = require('puppeteer');

describe('Login Flow', () => {
    it('should login successfully', async () => {
        const browser = await puppeteer.launch({ headless: false });
        const page = await browser.newPage();

        await page.goto('http://localhost:5173/login');

        // 测试断住在这里
        await page.type('#username', 'admin');
        await page.type('#password', 'password');
        await page.click('#login-button');

        // 期望跳转到首页，但实际没跳转
        await page.waitForNavigation({ timeout: 5000 });
        expect(page.url()).toContain('/dashboard');

        await browser.close();
    });
});

// 截图
await page.screenshot({ path: 'debug.png' });

// 监听 Console
page.on('console', msg => console.log('PAGE LOG:', msg.text()));

// 监听错误
page.on('pageerror', error => console.log('PAGE ERROR:', error.message));

// 监听网络请求失败
page.on('requestfailed', request => {
    console.log('REQUEST FAILED:', request.url(), request.failure().errorText);
});

// 监听响应
page.on('response', response => {
    if (response.status() >= 400) {
        console.log('RESPONSE ERROR:', response.url(), response.status());
    }
});

// 暂停执行，等待手动操作
// 注意：page.waitForTimeout() 已在 Puppeteer v22 中移除
await new Promise(r => setTimeout(r, 5000));  // 等待 5 秒

// 注意：page.pause() 是 Playwright 的 API，Puppeteer 中不可用
// Playwright 的调试模式见下一篇《Playwright调试模式与Trace-Viewer》