chromedevtools--chrome-devtools-mcp
Paul Irish
b747f9d74a
We upgrade the performance trace tools to include real-user experience data from the Chrome User Experience Report (CrUX). https://developer.chrome.com/docs/crux https://developer.chrome.com/docs/crux/methodology ### Deets * When a trace is stopped, the server now extracts the primary navigation URLs from the trace (determined by insightSets). * It calls the public CrUX API to fetch field metrics (LCP, INP, CLS) for each unique URL/Origin. * The formatting of crux data is handled by upstream TraceFormatter, but it looks like this: ```md Metrics (field / real users): - LCP: 2595 ms (scope: url) - LCP breakdown: - TTFB: 1273 ms (scope: url) - Load delay: 86 ms (scope: url) - Load duration: 451 ms (scope: url) - Render delay: 786 ms (scope: url) - INP: 140 ms (scope: url) - CLS: 0.06 (scope: url) - The above data is from CrUX–Chrome User Experience Report. It's how the page performs for real users. - The values shown above are the p75 measure of all real Chrome users - The scope indicates if the data came from the entire origin, or a specific url - Lab metrics describe how this specific page load performed, while field metrics are an aggregation of results from real-world users. Best practice is to prioritize metrics that are bad in field data. Lab metrics may be better or worse than fields metrics depending on the developer's machine, network, or the actions performed while tracing. ``` **Privacy Considerations:** * Updates the server README to inform users that performance analysis tools may send trace URLs to the Google CrUX API. * Adds a notification message to the server startup logs regarding the CrUX API interaction. Doc: go/crux-in-bifrost Fixes b/446630695 --------- Co-authored-by: Alex Rudenko <alexrudenko@chromium.org> Co-authored-by: Alex Rudenko <OrKoN@users.noreply.github.com>
298 行
7.7 KiB
TypeScript
298 行
7.7 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import assert from 'node:assert';
|
|
import {describe, it} from 'node:test';
|
|
|
|
import {parseArguments} from '../src/cli.js';
|
|
|
|
describe('cli args parsing', () => {
|
|
const defaultArgs = {
|
|
'category-emulation': true,
|
|
categoryEmulation: true,
|
|
'category-performance': true,
|
|
categoryPerformance: true,
|
|
'category-extensions': false,
|
|
categoryExtensions: false,
|
|
'category-network': true,
|
|
categoryNetwork: true,
|
|
'auto-connect': undefined,
|
|
autoConnect: undefined,
|
|
'performance-crux': true,
|
|
performanceCrux: true,
|
|
'usage-statistics': true,
|
|
usageStatistics: true,
|
|
};
|
|
|
|
it('parses with default args', async () => {
|
|
const args = parseArguments('1.0.0', ['node', 'main.js']);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
});
|
|
});
|
|
|
|
it('parses with browser url', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--browserUrl',
|
|
'http://localhost:3000',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
'browser-url': 'http://localhost:3000',
|
|
browserUrl: 'http://localhost:3000',
|
|
u: 'http://localhost:3000',
|
|
});
|
|
});
|
|
|
|
it('parses with user data dir', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--user-data-dir',
|
|
'/tmp/chrome-profile',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
'user-data-dir': '/tmp/chrome-profile',
|
|
userDataDir: '/tmp/chrome-profile',
|
|
});
|
|
});
|
|
|
|
it('parses an empty browser url', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--browserUrl',
|
|
'',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
'browser-url': undefined,
|
|
browserUrl: undefined,
|
|
u: undefined,
|
|
channel: 'stable',
|
|
});
|
|
});
|
|
|
|
it('parses with executable path', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--executablePath',
|
|
'/tmp/test 123/chrome',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
'executable-path': '/tmp/test 123/chrome',
|
|
e: '/tmp/test 123/chrome',
|
|
executablePath: '/tmp/test 123/chrome',
|
|
});
|
|
});
|
|
|
|
it('parses viewport', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--viewport',
|
|
'888x777',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
viewport: {
|
|
width: 888,
|
|
height: 777,
|
|
},
|
|
});
|
|
});
|
|
|
|
it('parses chrome args', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
`--chrome-arg='--no-sandbox'`,
|
|
`--chrome-arg='--disable-setuid-sandbox'`,
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
'chrome-arg': ['--no-sandbox', '--disable-setuid-sandbox'],
|
|
chromeArg: ['--no-sandbox', '--disable-setuid-sandbox'],
|
|
});
|
|
});
|
|
|
|
it('parses ignore chrome args', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
`--ignore-default-chrome-arg='--disable-extensions'`,
|
|
`--ignore-default-chrome-arg='--disable-cancel-all-touches'`,
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
'ignore-default-chrome-arg': [
|
|
'--disable-extensions',
|
|
'--disable-cancel-all-touches',
|
|
],
|
|
ignoreDefaultChromeArg: [
|
|
'--disable-extensions',
|
|
'--disable-cancel-all-touches',
|
|
],
|
|
});
|
|
});
|
|
|
|
it('parses wsEndpoint with ws:// protocol', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--wsEndpoint',
|
|
'ws://127.0.0.1:9222/devtools/browser/abc123',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
'ws-endpoint': 'ws://127.0.0.1:9222/devtools/browser/abc123',
|
|
wsEndpoint: 'ws://127.0.0.1:9222/devtools/browser/abc123',
|
|
w: 'ws://127.0.0.1:9222/devtools/browser/abc123',
|
|
});
|
|
});
|
|
|
|
it('parses wsEndpoint with wss:// protocol', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--wsEndpoint',
|
|
'wss://example.com:9222/devtools/browser/abc123',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
'ws-endpoint': 'wss://example.com:9222/devtools/browser/abc123',
|
|
wsEndpoint: 'wss://example.com:9222/devtools/browser/abc123',
|
|
w: 'wss://example.com:9222/devtools/browser/abc123',
|
|
});
|
|
});
|
|
|
|
it('parses wsHeaders with valid JSON', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--wsEndpoint',
|
|
'ws://127.0.0.1:9222/devtools/browser/abc123',
|
|
'--wsHeaders',
|
|
'{"Authorization":"Bearer token","X-Custom":"value"}',
|
|
]);
|
|
assert.deepStrictEqual(args.wsHeaders, {
|
|
Authorization: 'Bearer token',
|
|
'X-Custom': 'value',
|
|
});
|
|
});
|
|
|
|
it('parses disabled category', async () => {
|
|
const args = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--no-category-emulation',
|
|
]);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
'category-emulation': false,
|
|
categoryEmulation: false,
|
|
});
|
|
});
|
|
it('parses auto-connect', async () => {
|
|
const args = parseArguments('1.0.0', ['node', 'main.js', '--auto-connect']);
|
|
assert.deepStrictEqual(args, {
|
|
...defaultArgs,
|
|
_: [],
|
|
headless: false,
|
|
$0: 'npx chrome-devtools-mcp@latest',
|
|
channel: 'stable',
|
|
'auto-connect': true,
|
|
autoConnect: true,
|
|
});
|
|
});
|
|
|
|
it('parses usage statistics flag', async () => {
|
|
// Test default (should be true).
|
|
const defaultArgs = parseArguments('1.0.0', ['node', 'main.js']);
|
|
assert.strictEqual(defaultArgs.usageStatistics, true);
|
|
|
|
// Test enabling it
|
|
const enabledArgs = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--usage-statistics',
|
|
]);
|
|
assert.strictEqual(enabledArgs.usageStatistics, true);
|
|
|
|
// Test disabling it
|
|
const disabledArgs = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--no-usage-statistics',
|
|
]);
|
|
assert.strictEqual(disabledArgs.usageStatistics, false);
|
|
});
|
|
|
|
it('parses performance crux flag', async () => {
|
|
const defaultArgs = parseArguments('1.0.0', ['node', 'main.js']);
|
|
assert.strictEqual(defaultArgs.performanceCrux, true);
|
|
|
|
// force enable
|
|
const enabledArgs = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--performance-crux',
|
|
]);
|
|
assert.strictEqual(enabledArgs.performanceCrux, true);
|
|
|
|
const disabledArgs = parseArguments('1.0.0', [
|
|
'node',
|
|
'main.js',
|
|
'--no-performance-crux',
|
|
]);
|
|
assert.strictEqual(disabledArgs.performanceCrux, false);
|
|
});
|
|
});
|