Skip to content

feat: 新增 /emulate 端点支持设备/移动视口模拟#142

Open
fireshort wants to merge 1 commit into
eze-is:mainfrom
fireshort:feat/emulate-endpoint
Open

feat: 新增 /emulate 端点支持设备/移动视口模拟#142
fireshort wants to merge 1 commit into
eze-is:mainfrom
fireshort:feat/emulate-endpoint

Conversation

@fireshort

Copy link
Copy Markdown

背景

用 web-access 验证移动端 UI时,CDP proxy 没有视口模拟能力:/screenshot 截的是当前窗口尺寸,靠 matchMedia('(max-width: 768px)') 触发的 mobile-only 样式在桌面窗口下根本测不到。目前只能绕过 proxy、自己连 ws://…/devtools/browser + Target.attachToTarget + Emulation.setDeviceMetricsOverride 手写一段 CDP 脚本,每次移动端验证都要重写。

改动

CDP proxy 新增一个端点(纯增量路由,不碰任何现有端点):

POST /emulate?target=ID   body: {"width":390,"height":844,"dsf":2,"mobile":true,"ua":"...iPhone..."}
  → Emulation.setDeviceMetricsOverride + setTouchEmulationEnabled + setUserAgentOverride
POST /emulate?target=ID&reset=1   → 清除以上覆盖

字段均可选,默认 390x844 / dsf 2 / mobile true

移动端验证从「手写 30 行 CDP 脚本」变成一行 curl,之后该 tab 的 /eval/click/screenshot 都自动在移动视口下进行。

行为与边界

  • override 是 session 级有状态:emulate 后该 target 一直保持该视口,直到 reset/close(关闭 tab 时 session 连 override 一并销毁)。建议只对自建临时 tab 使用。
  • 不调 /emulate 时行为零变化;proxy 原本没有任何 Emulation.* 调用,无冲突。

测试

端到端验证(带 width=device-width 的页面,等价真实 SSR 站点):

检查 结果
innerWidth 390 ✓
matchMedia('(max-width: 768px)') true ✓
screen.width 390 ✓
devicePixelRatio ≈2 ✓
UA 覆盖 生效 ✓
reset=1 后 innerWidth / dpr 还原 ✓

node --check 通过。

CDP proxy 增加 POST /emulate(Emulation.setDeviceMetricsOverride + 触摸模拟 + UA 覆盖),
?reset=1 清除覆盖。用于移动端 UI 验证(触发 matchMedia 断点、touch 检测、移动 UA),
免去每次手写 CDP 脚本连 browser 端点。override 作用于目标 session,emulate 后其
/eval /screenshot /click 保持该视口,reset 或 /close 即还原;纯新增路由,不影响现有端点。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant