feat: support device scale factor in --viewport

Author: Aalivexy

src/McpContext.ts

@@ -63,6 +63,8 @@ interface McpContextOptions {
   experimentalIncludeAllPages?: boolean;
   // Whether CrUX data should be fetched.
   performanceCrux: boolean;
+  // Viewport emulation applied before the context was created.
+  initialViewport?: Viewport;
 }
 
 const DEFAULT_TIMEOUT = 5_000;
@@ -85,6 +87,16 @@ function getNetworkMultiplierFromString(condition: string | null): number {
   return 1;
 }
 
+function normalizeViewportSettings(viewport: Viewport): Viewport {
+  return {
+    deviceScaleFactor: 1,
+    isMobile: false,
+    hasTouch: false,
+    isLandscape: false,
+    ...viewport,
+  };
+}
+
 export class McpContext implements Context {
   browser: Browser;
   logger: Debugger;
@@ -151,6 +163,11 @@ export class McpContext implements Context {
 
   async #init() {
     const pages = await this.createPagesSnapshot();
+    if (this.#selectedPage && this.#options.initialViewport) {
+      this.#selectedPage.emulationSettings.viewport = normalizeViewportSettings(
+        this.#options.initialViewport,
+      );
+    }
     await this.createExtensionServiceWorkersSnapshot();
     await this.#networkCollector.init(pages);
     await this.#consoleCollector.init(pages);
@@ -380,13 +397,7 @@ export class McpContext implements Context {
       await page.setViewport(null);
       delete newSettings.viewport;
     } else {
-      const defaults = {
-        deviceScaleFactor: 1,
-        isMobile: false,
-        hasTouch: false,
-        isLandscape: false,
-      };
-      const viewport = {...defaults, ...options.viewport};
+      const viewport = normalizeViewportSettings(options.viewport);
       await page.setViewport(viewport);
       newSettings.viewport = viewport;
     }

src/index.ts

@@ -101,6 +101,10 @@ export async function createMcpServer(
         experimentalDevToolsDebugging: devtools,
         experimentalIncludeAllPages: serverArgs.experimentalIncludeAllPages,
         performanceCrux: serverArgs.performanceCrux,
+        initialViewport:
+          serverArgs.viewport?.deviceScaleFactor === undefined
+            ? undefined
+            : serverArgs.viewport,
       });
     }
     return context;

tests/tools/lighthouse.test.ts

@@ -10,6 +10,7 @@ import os from 'node:os';
 import path from 'node:path';
 import {describe, it} from 'node:test';
 
+import type {ParsedArguments} from '../../src/bin/chrome-devtools-mcp-cli-options.js';
 import {lighthouseAudit} from '../../src/tools/lighthouse.js';
 import {serverHooks} from '../server.js';
 import {html, withMcpContext} from '../utils.js';
@@ -117,6 +118,69 @@ describe('lighthouse', () => {
       });
     });
 
+    it('restores launch-time viewport device scale factor', async () => {
+      server.addHtmlRoute('/test-launch-viewport', html`<div>Test DPR</div>`);
+
+      await withMcpContext(
+        async (response, context) => {
+          const page = context.getSelectedPptrPage();
+          await page.goto(server.getRoute('/test-launch-viewport'));
+
+          {
+            const viewportData = await page.evaluate(() => {
+              return {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                deviceScaleFactor: window.devicePixelRatio,
+              };
+            });
+
+            assert.deepStrictEqual(viewportData, {
+              width: 400,
+              height: 400,
+              deviceScaleFactor: 2,
+            });
+          }
+
+          await lighthouseAudit.handler(
+            {
+              params: {
+                mode: 'snapshot',
+                device: 'desktop',
+              },
+              page: context.getSelectedMcpPage(),
+            },
+            response,
+            context,
+          );
+
+          {
+            const viewportData = await page.evaluate(() => {
+              return {
+                width: window.innerWidth,
+                height: window.innerHeight,
+                deviceScaleFactor: window.devicePixelRatio,
+              };
+            });
+
+            assert.deepStrictEqual(viewportData, {
+              width: 400,
+              height: 400,
+              deviceScaleFactor: 2,
+            });
+          }
+        },
+        {},
+        {
+          viewport: {
+            width: 400,
+            height: 400,
+            deviceScaleFactor: 2,
+          },
+        } as ParsedArguments,
+      );
+    });
+
     it('runs Lighthouse in snapshot mode with mobile device', async () => {
       server.addHtmlRoute('/test-mobile', html`<div>Test Mobile</div>`);
 

tests/utils.ts

@@ -105,7 +105,15 @@ export async function withMcpContext(
   } = {},
   args: ParsedArguments = {} as ParsedArguments,
 ) {
-  await withBrowser(async browser => {
+  await withBrowser(async (browser, page) => {
+    if (args.viewport?.deviceScaleFactor !== undefined) {
+      await page.setViewport({
+        width: args.viewport.width,
+        height: args.viewport.height,
+        deviceScaleFactor: args.viewport.deviceScaleFactor,
+      });
+    }
+
     const response = new McpResponse(args);
     if (context) {
       context.dispose();
@@ -116,6 +124,10 @@ export async function withMcpContext(
       {
         experimentalDevToolsDebugging: false,
         performanceCrux: options.performanceCrux ?? true,
+        initialViewport:
+          args.viewport?.deviceScaleFactor === undefined
+            ? undefined
+            : args.viewport,
       },
       Locator,
     );