browser-testing-with-devtools
Verify frontend behavior with real browser runtime data instead of static guessing. Use for UI bugs, console errors, DOM issues, network failures, performance checks, or visual verification in web apps.
- License 许可
- MIT
- 最近更新
- 2026-06-26
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- name
- browser-testing-with-devtools
- description
- Verify frontend behavior with real browser runtime data instead of static guessing. Use for UI bugs, console errors, DOM issues, network failures, performance checks, or visual verification in web apps.
03 SKILL.md 正文
browser-testing-with-devtools
不要猜畫面。看 runtime。
目標
- 用真實瀏覽器資料確認問題
- 把重現步驟固定下來
- 修前修後都驗證
工具順序
agent-browserplaywright-cli- 平台內建 DevTools / browser MCP
檢查項目
- console error
- failed network requests
- DOM 結構
- hydration / rendering 問題
- layout overflow
- interaction state
規則
- 沒看 runtime，不下結論
- 先保留錯誤訊息與重現步驟
- 若是純邏輯 bug，再搭配
debugging-and-error-recovery
04 同仓库更多 Skills
website-best-practices
Build websites with strong semantic HTML, accessibility, performance, content structure.
using-agent-skills
Meta skill entrypoint. Select the right workflow skill for the current project phase, initialize required docs, and keep execution aligned with the project lifecycle.
ui-ux-designer
Create interface designs, design systems, and UX improvements with accessibility-first guidance.
typescript-best-practices
Apply TypeScript best practices for strict mode, safe narrowing, tsconfig safety, robust error handling.
tool-discovery-and-installation
Detect missing skills, MCP servers, CLIs, and sandbox tools; choose safe install paths; install or guide tool setup with explicit authorization and verification.
text-to-lottie
Generate or refine production-ready Lottie animations for web and app UI work.