page-inspector

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

通过Chrome DevTools MCP连接到正在运行的Chrome浏览器会话，导航至目标页面，全面捕获当前布局、样式和结构的快照。该输出可作为实施工作的基准参考。

Arguments

参数

```
$ARGUMENTS[0]
```
— Target URL to inspect (e.g.
```
http://localhost:3000/page
```
)
```
$ARGUMENTS[1]
```
— (optional) Output directory. Defaults to
```
./page-inspector-output
```

```
$ARGUMENTS[0]
```
— 待检查的目标URL（例如
```
http://localhost:3000/page
```
）
```
$ARGUMENTS[1]
```
— （可选）输出目录，默认值为
```
./page-inspector-output
```

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

Chrome已启用远程调试（或已配置Chrome DevTools MCP服务器）
目标页面可访问（开发服务器正在运行）
如果页面需要身份验证，尝试从环境变量中获取凭据。如果未找到凭据或身份验证失败，则跳过检查

Execution

执行步骤

1. Connect & Navigate

1. 连接与导航

List available pages via
```
list_pages
```
Navigate to
```
$ARGUMENTS[0]
```
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

通过
```
list_pages
```
列出可用页面
导航至
```
$ARGUMENTS[0]
```
，如果页面已打开则直接选中

检查前清除页面缓存并强制刷新：

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

等待页面完全重载

2. Capture Desktop Screenshot

2. 捕获桌面端截图

Take a full-page screenshot at the current viewport width
Save to
```
$ARGUMENTS[1]/screenshots/desktop.png
```

以当前视口宽度截取整页截图
保存至
```
$ARGUMENTS[1]/screenshots/desktop.png
```

3. Capture Key Viewport Screenshots

3. 捕获关键视口截图

Take screenshots at these widths to capture responsive breakpoints:

1440px (desktop large)
1024px (tablet landscape)
768px (tablet portrait)
375px (mobile)

Save each to

$ARGUMENTS[1]/screenshots/{width}px.png

在以下宽度下截取截图以捕获响应式断点：

1440px（大屏桌面端）
1024px（平板横屏）
768px（平板竖屏）
375px（移动端）

将每个截图保存至

$ARGUMENTS[1]/screenshots/{width}px.png

4. Inspect Layout Structure

4. 检查布局结构

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)

使用

evaluate_script

提取以下内容：

关键布局容器及其CSS display/position属性
主要布局元素的Flex/grid配置
所有fixed/sticky定位的元素
整体页面结构（header、nav、主内容、侧边栏、footer）

5. Inspect Computed Styles

5. 检查计算样式

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

针对主内容区域和关键UI元素，捕获以下内容：

字体族、字号、字重、行高
颜色（文本、背景、边框）
间距（外边距、内边距）
盒模型大小和尺寸

6. Write Output

6. 写入输出

Create

$ARGUMENTS[1]/output.md

with:

markdown

undefined

创建

$ARGUMENTS[1]/output.md

文件，内容如下：

markdown

undefined

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
```

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 $ARGUMENTS[1]/screenshots` before writing files.

{Any observations relevant to upcoming changes}


写入文件前请确保执行 `mkdir -p $ARGUMENTS[1]/screenshots`。