browser-render-visualizationlisted

# 浏览器渲染可视化 ## 核心原则 - 用真实浏览器渲染页面，而不是只看源码或静态 HTML。 - 静态页面也优先通过本地 HTTP server 打开，不要直接用 `file://`。 - 桌面端和移动端都要截图检查。 - Canvas、Three.js、动画页面不能只检查页面打开，还要确认画面不是空白。 - 截图、临时脚本和缓存放在明确目录；如果临时放到 `/tmp`，用后清理。 - 如果缺 Node.js、Playwright 或浏览器依赖，安装前先确认当前环境允许安装。 ## 适用场景 - GitHub Pages 或 docs 静态页面验收。 - React、Vue、Vite 或普通 HTML/CSS/JS 页面截图。 - Canvas、Three.js、WebGL、动态图形是否真实渲染。 - 移动端布局是否溢出、文字是否重叠、按钮是否可点击。 - 页面资源路径、字体、图片、CDN、import map、module import 是否正常。 ## 环境准备 检查 Node.js： ```bash node -v npm -v ``` 安装 Playwright： ```bash npm install -D playwright npx playwright install chromium ``` Linux 如果缺浏览器系统依赖： ```bash npx playwright install-deps chromium ``` 如果 npm 或 Playwright 缓存权限有问题，可以指定临时缓存；任务结束后清理： ```bash env npm_config_cache=/tmp/.npm \ PLAYWRIGHT_BROWSERS_PATH=/tmp/pw-browsers \ npx playwright install chromium ``` ## Playwright 源码追溯 - Playwright 行为以当前 npm 包和浏览器版本为准；截图、locator、等待条件或 console 捕获异常时，先确认版本和包路径。 - `require.resolve('playwright')` 可定位 Node 包入口。 - `npm view playwright version` 可查看 registry 最新版本；不要因此自动升级，升级前先确认。 - 源码只用于阅读和定位问题，不要改源码，不要直接改 `node_modules`；需要改测试脚本时改项目脚本，需要改依赖时先征得用户同意。 ```bash node - <<'JS' const pw = require('playwright'); console.log('playwright package:', require.resolve('playwright')); console.log('chromium executable:', pw.chromium.executablePath()); JS ``` ```bash npx playwright --version npm ls playwright ``` 常见 Linux 依赖包括： ```bash sudo apt install -y \ libnspr4 \ libnss3 \ libasound2t64 \ libatk-bridge2.0-0 \ libgtk-3-0 \ libgbm1 \ l