Chrome DevTools MCP

Instructions

Implementation Reference

• src/tools/screenshot.ts:52-100 (handler)

  The main handler function that captures a screenshot of the page or a specific element using Puppeteer. It supports formats (png, jpeg, webp), quality, full page, element by UID, and either attaches the image or saves to file.
  handler: async (request, response, context) => { if (request.params.uid && request.params.fullPage) { throw new Error('Providing both "uid" and "fullPage" is not allowed.'); } let pageOrHandle: Page | ElementHandle; if (request.params.uid) { pageOrHandle = await context.getElementByUid(request.params.uid); } else { pageOrHandle = context.getSelectedPage(); } const screenshot = await pageOrHandle.screenshot({ type: request.params.format, fullPage: request.params.fullPage, quality: request.params.quality, optimizeForSpeed: true, // Bonus: optimize encoding for speed }); if (request.params.uid) { response.appendResponseLine( `Took a screenshot of node with uid "${request.params.uid}".`, ); } else if (request.params.fullPage) { response.appendResponseLine( 'Took a screenshot of the full current page.', ); } else { response.appendResponseLine( "Took a screenshot of the current page's viewport.", ); } if (request.params.filePath) { const file = await context.saveFile(screenshot, request.params.filePath); response.appendResponseLine(`Saved screenshot to ${file.filename}.`); } else if (screenshot.length >= 2_000_000) { const {filename} = await context.saveTemporaryFile( screenshot, `image/${request.params.format}`, ); response.appendResponseLine(`Saved screenshot to ${filename}.`); } else { response.attachImage({ mimeType: `image/${request.params.format}`, data: Buffer.from(screenshot).toString('base64'), }); } },
• src/tools/screenshot.ts:20-51 (schema)

  Zod schema defining the input parameters for the take_screenshot tool: format, quality, uid, fullPage, filePath.
  schema: { format: z .enum(['png', 'jpeg', 'webp']) .default('png') .describe('Type of format to save the screenshot as. Default is "png"'), quality: z .number() .min(0) .max(100) .optional() .describe( 'Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.', ), uid: z .string() .optional() .describe( 'The uid of an element on the page from the page content snapshot. If omitted takes a pages screenshot.', ), fullPage: z .boolean() .optional() .describe( 'If set to true takes a screenshot of the full page instead of the currently visible viewport. Incompatible with uid.', ), filePath: z .string() .optional() .describe( 'The absolute path, or a path relative to the current working directory, to save the screenshot to instead of attaching it to the response.', ), },
• src/tools/screenshot.ts:13-101 (registration)

  The tool is defined and registered using defineTool, including name 'take_screenshot', description, annotations (category DEBUGGING), schema, and handler.
  export const screenshot = defineTool({ name: 'take_screenshot', description: `Take a screenshot of the page or element.`, annotations: { category: ToolCategories.DEBUGGING, readOnlyHint: true, }, schema: { format: z .enum(['png', 'jpeg', 'webp']) .default('png') .describe('Type of format to save the screenshot as. Default is "png"'), quality: z .number() .min(0) .max(100) .optional() .describe( 'Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.', ), uid: z .string() .optional() .describe( 'The uid of an element on the page from the page content snapshot. If omitted takes a pages screenshot.', ), fullPage: z .boolean() .optional() .describe( 'If set to true takes a screenshot of the full page instead of the currently visible viewport. Incompatible with uid.', ), filePath: z .string() .optional() .describe( 'The absolute path, or a path relative to the current working directory, to save the screenshot to instead of attaching it to the response.', ), }, handler: async (request, response, context) => { if (request.params.uid && request.params.fullPage) { throw new Error('Providing both "uid" and "fullPage" is not allowed.'); } let pageOrHandle: Page | ElementHandle; if (request.params.uid) { pageOrHandle = await context.getElementByUid(request.params.uid); } else { pageOrHandle = context.getSelectedPage(); } const screenshot = await pageOrHandle.screenshot({ type: request.params.format, fullPage: request.params.fullPage, quality: request.params.quality, optimizeForSpeed: true, // Bonus: optimize encoding for speed }); if (request.params.uid) { response.appendResponseLine( `Took a screenshot of node with uid "${request.params.uid}".`, ); } else if (request.params.fullPage) { response.appendResponseLine( 'Took a screenshot of the full current page.', ); } else { response.appendResponseLine( "Took a screenshot of the current page's viewport.", ); } if (request.params.filePath) { const file = await context.saveFile(screenshot, request.params.filePath); response.appendResponseLine(`Saved screenshot to ${file.filename}.`); } else if (screenshot.length >= 2_000_000) { const {filename} = await context.saveTemporaryFile( screenshot, `image/${request.params.format}`, ); response.appendResponseLine(`Saved screenshot to ${filename}.`); } else { response.attachImage({ mimeType: `image/${request.params.format}`, data: Buffer.from(screenshot).toString('base64'), }); } }, });