Mock API trực tiếp trên Chrome với Network Overrides API (DevTools)
Trong quá trình phát triển frontend, chắc hẳn ai cũng từng gặp những tình huống như:
- Backend chưa xong API
- Cần test edge cases
- Muốn giả lập lỗi 500/404
- Test UI với nhiều loại response khác nhau
- Muốn debug nhanh mà không cần sửa code backend
Thông thường chúng ta sẽ dùng:
- Mock server
- Postman
- Charles Proxy
- Requestly
- Hardcode mock data
Nhưng tất cả đều có một số bất tiện nhất định.
Gần đây mình thử một extension khá thú vị tên là Network Overrides API (DevTools) — cho phép override API response trực tiếp trong Chrome DevTools.
Chrome Extension: https://chromewebstore.google.com/detail/network-overrides-api-dev/holdjgmcnpelgclhopiejilhhkfcmpba
Network Overrides API là gì?
Đây là một Chrome/Edge extension cho phép:
- Intercept network request
- Override response body
- Mock API trực tiếp trong browser
- Test frontend mà không cần sửa backend
- Tạo rule bằng URL pattern hoặc regex
Điểm hay là extension hoạt động ngay bên trong DevTools nên workflow khá tự nhiên cho frontend developer.
Theo mô tả extension:
"Intercept and override network response bodies directly in the browser during development and testing."
Extension sử dụng chrome.debugger cùng Chrome DevTools Protocol để chặn và thay đổi response runtime.
Vì sao mình thấy extension này hữu ích?
Thông thường khi muốn mock API nhanh, mình sẽ phải:
- Setup mock server
- Sửa env
- Dùng proxy
- Hardcode data
- Hoặc dùng Requestly/Charles
Nhưng với extension này:
- Mở DevTools
- Chọn request
- Override response
- Reload page
Xong.
Workflow cực kỳ nhanh cho việc:
- Test UI state
- Empty data
- Error state
- Permission state
- Feature demo
- Reproduce bug
Cài đặt
Cài trực tiếp từ Chrome Web Store:
https://chromewebstore.google.com/detail/network-overrides-api-dev/holdjgmcnpelgclhopiejilhhkfcmpba
Sau khi cài:
- Open DevTools
- Xuất hiện tab extension
- Theo dõi network request realtime
Cách hoạt động
Extension sẽ:
- Capture network requests
- Match URL theo pattern
- Intercept response
- Trả về mocked response mới
Ví dụ:
{
"success": false,
"message": "Permission denied"
}
Frontend sẽ nhận response giả lập này thay vì response thật từ server.
Điều này cực kỳ hữu ích khi test UI state mà backend chưa support.
Hỗ trợ URL Pattern và Regex
Một điểm mình khá thích là extension hỗ trợ:
- Exact URL
- Wildcard
- Regex pattern
Ví dụ:
/api/users/*
Hoặc:
/api/products/.*
Điều này giúp mock dynamic API dễ dàng hơn nhiều.
Một vài use case thực tế
1. Test Empty State
[]
2. Test Error State
{
"status": 500,
"message": "Internal server error"
}
3. Test Permission UI
{
"canEdit": false,
"canDelete": false
}
4. Demo feature khi backend chưa xong
Frontend team có thể tự mock response để demo UI trước.
So sánh với các tool khác
| Tool | Ưu điểm | Nhược điểm |
|---|---|---|
| Postman Mock | Dễ setup | Không realtime trong browser |
| Charles Proxy | Mạnh | Setup hơi phức tạp |
| Requestly | Nhiều tính năng | UI khá nặng |
| Network Overrides API | Nhẹ, nhanh, nằm trong DevTools | Chưa nhiều advanced features |
Điểm mình thích
1. Workflow cực nhanh
Không cần:
- Setup proxy
- Chạy mock server
- Đổi env
Chỉ cần DevTools là đủ.
2. Tập trung cho frontend developer
UI và flow được thiết kế khá giống DevTools native nên rất dễ làm quen.
3. Local-only
Theo mô tả extension, dữ liệu được lưu local thông qua chrome.storage.local.
Điều này phù hợp cho development workflow cá nhân.
4. Hữu ích cho UI testing
Rất tiện để test:
- Skeleton loading
- Empty state
- Error boundary
- Retry state
- Permission matrix
Một vài hạn chế
1. Không thay thế hoàn toàn proxy tool
Nếu cần:
- SSL debugging
- Full traffic inspection
- Advanced rewrite
- Team collaboration
Thì Charles hoặc Requestly vẫn mạnh hơn.
2. Chỉ phù hợp browser-side testing
Tool này phù hợp nhất cho frontend/UI testing.
Không thay thế backend integration testing.
3. Cần quyền debugger
Extension sử dụng Chrome Debugger Protocol nên sẽ cần quyền khá mạnh trong browser.
Khi dùng extension kiểu này, nên chỉ cài từ nguồn đáng tin cậy.
Góc nhìn cá nhân
Mình nghĩ xu hướng "mock trực tiếp trong browser" sẽ ngày càng phổ biến.
Đặc biệt với:
- Frontend-heavy apps
- Micro-frontend
- SPA
- Internal tools
- Dashboard systems
Việc test UI state nhanh mà không phụ thuộc backend giúp tăng tốc development đáng kể.
Network Overrides API là một extension nhỏ nhưng giải quyết đúng pain point của frontend developer.
Kết luận
Nếu bạn là frontend developer và thường xuyên phải:
- Chờ backend
- Mock API
- Test edge cases
- Debug UI state
Thì đây là một extension đáng thử.
Nó không thay thế hoàn toàn các tool chuyên sâu như Charles hay Requestly, nhưng cho workflow hằng ngày thì cực kỳ tiện.
Thông tin thêm:
- Chrome Web Store: https://chromewebstore.google.com/detail/network-overrides-api-dev/holdjgmcnpelgclhopiejilhhkfcmpba
All rights reserved
