Page Inspector — Capture Current Page Layout & Styles

Connects to a running Chrome browser session via Chrome DevTools MCP, navigates to the target page, and captures a comprehensive snapshot of the current layout, styles, and structure. This output serves as a baseline reference for implementation.

Inputs

Raw arguments: $ARGUMENTS

Infer from the arguments:

• TARGET_URL: the URL to inspect

• OUT_DIR: output directory, or ./page-inspector-output if not provided

Prerequisites

• Chrome running with remote debugging enabled (or Chrome DevTools MCP server configured)

• Target page accessible (dev server running)

• If the page requires authentication, attempt to find credentials from environment variables. If none are found or authentication fails, skip the inspection

Execution

1. Connect & Navigate

• List available pages via list_pages

• Navigate to TARGET_URL or select it if already open

• Clear the page cache and hard-refresh before inspecting: // Run via evaluate_script to clear page cache and hard-refresh caches.keys().then(names => names.forEach(name => caches.delete(name))); location.reload(true);

• Wait for the page to fully reload

2. Capture Desktop Screenshot

• Take a full-page screenshot at the current viewport width

• Save to OUT_DIR/screenshots/desktop.png

3. Capture Key Viewport Screenshots

Take screenshots at these widths to capture responsive breakpoints:

• 1440px (desktop large)

• 1024px (tablet landscape)

• 768px (tablet portrait)

• 375px (mobile)

Save each to OUT_DIR/screenshots/{width}px.png

4. Inspect Layout Structure

Use evaluate_script to extract:

• Key layout containers and their CSS display/position properties

• Flex/grid configurations on major layout elements

• Any fixed/sticky positioned elements

• Overall page structure (header, nav, main content, sidebar, footer)

5. Inspect Computed Styles

For the main content area and key UI elements, capture:

• Font families, sizes, weights, line heights

• Colors (text, background, borders)

• Spacing (margins, paddings)

• Box sizing and dimensions

6. Write Output

Create OUT_DIR/mugshot.md with:

Page Inspector Report: {url}

Screenshots

• Desktop (current): screenshots/desktop.png
• 1440px: screenshots/1440px.png
• 1024px: screenshots/1024px.png
• 768px: screenshots/768px.png
• 375px: screenshots/375px.png

Page Structure

{DOM structure overview — key containers and their roles}

Layout Properties

{CSS display, grid/flex configs, positioning for key elements}

Typography & Colors

{Font stacks, sizes, color palette observed}

Spacing & Dimensions

{Key measurements observed}

Notes

{Any observations relevant to upcoming changes}

Ensure mkdir -p OUT_DIR/screenshots before writing files.