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

1. Chrome running with remote debugging enabled (or Chrome DevTools MCP server configured)
2. Target page accessible (dev server running)
3. 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.