skill
headless-browser
用本机 Chrome / Chromium / Edge 给网页截图、测量真实布局的 Agent Skill
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/chenkui-luo/headless-browser itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Nov 1, 2026headless-browser
用本机真实浏览器给网页截图、量布局的 Skill。改完前端不用靠猜：一张整页长图看出整体效果，一份实测数据确认有没有横向溢出、文字对比度够不够、手机宽度下排版对不对。
它不引入 Playwright 之类的依赖，直接驱动本机已安装的 Chrome / Chromium / Edge，走的正是用户浏览器同一个渲染引擎。
你会得到什么
- 整页截图：按文档真实高度截长图，不靠猜测窗口高度；也可以只截首屏。
- 多视口：一次跑桌面、平板、手机多个尺寸，支持 200% 设备像素比。
- 可核对的布局数据：实测视口宽、文档高、横向溢出、越界元素、对比度不足的文字、关键字号。
- 页面问题清单：脚本错误、控制台错误、加载失败的图片，与截图一起写进
report.json。 - 状态截图：截图前先用简单动作（点击、输入、滚动等）把页面切到目标状态。
安装
把仓库地址交给 Agent，让它装到你的 Skill 目录：
请帮我安装这个 Skill：https://github.com/chenkui-luo/headless-browser
或者用命令安装（需要本机能运行 npx）：
npx skills add chenkui-luo/headless-browser
手动安装也可以：把仓库放进宿主约定的 Skill 目录即可，仓库根目录就是 Skill 根目录。
使用
用自然语言说明目标，例如“看看这个页面在手机上排版对不对”“帮我截一张整页图”“改完后确认没有横向溢出”。
也可以直接运行脚本，所有命令都在 Skill 根目录执行：
node scripts/shot.mjs ./dist/index.html
node scripts/shot.mjs ./dist/index.html --size 390x844 --viewport
node scripts/measure.mjs ./dist/index.html --w 390 --w 1440
完整的选项、输出结构和判读方法写在 SKILL.md，那边是给 Agent 看的主流程。
配置
无需额外配置，也没有任何密钥或网络服务。
可选：设置环境变量 CHROME_PATH 指向浏览器的可执行文件，或在使用脚本时加 --browser <路径>。不设置时自动查找 Chrome、Chromium、Edge。
兼容性
| 范围 | 状态 |
|---|---|
| Node.js | 22 或更新版本；只用内置模块 |
| 浏览器 | Chrome、Chromium、Edge（本机已安装其一即可） |
| 平台 | Windows 已实测；macOS、Linux 按标准路径实现，未实机验证 |
| 网络 | 不需要；只访问本机文件与你指定的地址 |
| 已验证 | Node 24.19.0 + Chrome 156.0.8078.47 + Edge 156.0.4314.42（Windows） |
浏览器大版本更新后建议重跑一次回归测试，确认截图和测量结果仍然可靠。
数据与边界
- 截图与测量都在本机完成，不上传页面内容；打开本地文件时只起一个监听
127.0.0.1的临时静态服务器，用完即关。 - 只读取你传入的页面和它引用的本地资源，不读取浏览器其余数据，使用独立的临时用户目录。
- 不处理登录态、浏览器扩展、下载和真实录屏；视频、WebGL 与复杂动画在无头模式下可能渲染不全。
- 需要执行环境允许浏览器进程创建命名管道；受限沙箱里可能被拒绝，脚本会直接说明原因。
开发与测试
node --test
测试会真实启动浏览器，覆盖整页高度、精确视口、本地文件查询参数、横向溢出、图片与控制台错误报告。本机没有可用浏览器时整组跳过。