Intercept browser API calls to mock frontend data without changing source code.
npx skills add https://github.com/notdp/.dotfiles --skill chrome-devtools-mock
Please help me install this Agent Skill. Skill: chrome-devtools-mock Source: https://github.com/notdp/.dotfiles/tree/main/skills/chrome-devtools-mock Command: npx skills add https://github.com/notdp/.dotfiles --skill chrome-devtools-mock
通过 Chrome DevTools MCP 的 navigate_page + initScript 注入 XMLHttpRequest 拦截，在浏览器层面 mock API 数据，无需修改源码，帮助快速预览 UI 与验证前端逻辑。
Navigate to the target page and inject the initScript before page load to begin mocking.
High-intent search queries and answers about installing and using this skill.
You can mock API data in the browser without modifying source code by injecting an XMLHttpRequest interceptor via Chrome DevTools Protocol. This intercepts network requests before actual calls, returning deterministic mock data for UI prototyping and testing.
The best way to test frontend UI when backend APIs are unavailable is injecting a deterministic XHR interceptor before page load. This approach uses Chrome DevTools Protocol to match specific API paths and return mock data, allowing rapid UI verification.
The initScript intercepts XHR requests by executing JavaScript before the page loads, applying an XMLHttpRequest interceptor that captures API calls prior to actual network execution. This ensures deterministic mock data is returned before any real network call occurs.
Yes, Chrome DevTools Protocol supports mocking API responses for specific routes. By using initScript to inject an XHR interceptor, you can apply exact API path matching to avoid mistakenly intercepting non-target network requests during browser-testing.
Yes, you can use navigate_page to inject mock data for feature demos. It works with initScript to inject the XHR interceptor before page load, ensuring the browser receives mocked API data without needing backend availability or source code changes.
A limitation of using XHR interception for browser testing is that it requires Chrome DevTools Protocol support with navigate_page and initScript. It specifically targets XMLHttpRequests, meaning other network request types may not be intercepted for mocking.
darkglow-netAutomate browser debugging and performance analysis via Chrome DevTools MCP.
flutterWrite Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.
winsorllcAutomate Chrome browser interactions via the Chrome DevTools Protocol.
heaptracetechnologyCreate TypeScript-safe mock services with MSW, Nock, or custom servers.
