如何配置Playwright使Chrome调试器默认在底部而非右侧打开？

安全阿岳

2026-6-13

如何让Playwright启动的Chrome调试器默认在底部打开

Chrome本身没有直接的命令行参数用于指定DevTools的停靠位置，但可以通过Chrome DevTools Protocol（CDP） 配合Playwright实现这一需求。因为Playwright默认使用临时用户数据目录，每次启动都是默认的右侧停靠，我们可以通过CDP命令强制设置调试器位置。

实现步骤

在Playwright中创建CDP会话，直接调用DevTools协议的Emulation.setDevToolsPreference命令，设置dockSide参数为bottom。

代码示例（JavaScript/TypeScript）

独立脚本场景

const { chromium } = require('playwright');

(async () => {
  // 启动带调试器的Chrome
  const browser = await chromium.launch({
    headless: false,
    devtools: true
  });
  const context = await browser.newContext();

  // 创建CDP会话并设置调试器位置
  const cdpSession = await context.newCDPSession();
  await cdpSession.send('Emulation.setDevToolsPreference', {
    preferenceName: 'dockSide',
    value: 'bottom'
  });

  const page = await context.newPage();
  await page.goto('https://example.com');

  // 后续测试逻辑
})();

Playwright Test框架场景

import { test } from '@playwright/test';

test.beforeEach(async ({ context }) => {
  // 在每个测试前设置调试器位置
  const cdpSession = await context.newCDPSession();
  await cdpSession.send('Emulation.setDevToolsPreference', {
    preferenceName: 'dockSide',
    value: 'bottom'
  });
});

test('调试器默认底部停靠示例', async ({ page }) => {
  await page.goto('https://example.com');
  // 执行测试步骤
});