Giới thiệu
Chào các bạn 👋
Trong suốt một năm qua, tôi đã sử dụng một công cụ nhỏ để theo dõi Firestore và cuối cùng đã hoàn thiện nó: FireScope — một bảng điều khiển DevTools cho Firestore trên Chrome.
FireScope theo dõi lưu lượng Firestore của ứng dụng bạn theo thời gian thực, hiển thị các truy vấn và tham số một cách nhanh chóng, và cho phép bạn xuất mã (Angular/Node/Flutter/JSON). Không cần cài đặt phức tạp — chỉ cần cài đặt và mở DevTools → FireScope.
- Cửa hàng Chrome: Cài đặt FireScope
- GitHub (mã nguồn mở): Xem trên GitHub
Tóm tắt nhanh
- ✅ Bắt trực tiếp các yêu cầu Firestore (đọc/ghi/truy vấn)
- ✅ Chi tiết rõ ràng: phương thức, đường dẫn, tham số, nội dung
- ✅ Xuất mã với một cú nhấp chuột sang Angular / Node / Flutter / JSON
- ✅ Chế độ xem Collections cho việc điều hướng nhanh chóng
- ✅ Tích hợp trong Chrome DevTools → FireScope
- 🧩 Mã nguồn mở — chào đón phản hồi và PR
Công cụ này giúp tôi giải quyết một vấn đề tôi thường gặp phải khi phát triển với Firestore/Firebase: Tôi muốn thấy chính xác những gì ứng dụng của mình gửi đi và nhanh chóng tạo mẫu lại cùng một gọi trong mã.
Đối tượng sử dụng
- Những ai thường xuyên gỡ lỗi Firestore và muốn có cái nhìn tập trung (không bị phân tâm bởi tab Network).
- Những ai muốn chia sẻ các đoạn mã có thể tái lập cho đồng nghiệp.
- Những ai thích dán một bản xuất sẵn và điều chỉnh nó.
Hướng dẫn nhanh
- Cài đặt từ Cửa hàng Chrome.
- Mở ứng dụng của bạn và nhấn F12 để vào DevTools.
- Chuyển sang bảng điều khiển “FireScope”.
- Tương tác với ứng dụng của bạn (đọc/ghi/truy vấn).
- Nhấp vào bất kỳ yêu cầu nào để xem chi tiết hoặc Xuất.
Không thấy gì? Kích hoạt một hành động Firestore (tải trang đọc dữ liệu hoặc nhấn nút ghi).
Những gì bạn có thể xuất
- Angular (các đoạn mã thân thiện với dịch vụ)
- Node (các công cụ phía máy chủ)
- Flutter (các đoạn mã Dart)
- JSON (hình dạng thô mà bạn có thể giữ trong tài liệu/kiểm thử)
Các bản xuất là một điểm khởi đầu mà bạn có thể dán và điều chỉnh.
Bảo mật
FireScope hoạt động hoàn toàn trong trình duyệt của bạn. Nó kiểm tra hoạt động mạng Firestore của tab bạn qua DevTools — không có máy chủ, không theo dõi.
Xử lý sự cố
- Bảng FireScope bị thiếu? Đóng/mở lại DevTools, sau đó tải lại trang.
- Danh sách trống? Thực hiện một hành động liên quan đến Firestore (đọc/ghi/truy vấn).
- Vẫn gặp khó khăn? Mở một vấn đề trên GitHub với một mô tả ngắn.
Lộ trình / Ý tưởng
- Thêm các đích xuất khác (React, Svelte, các hành động máy chủ Next.js, v.v.)
- Bộ lọc & tìm kiếm, ghim một phiên
- Mẫu “Sao chép như kiểm thử”
- Phím tắt và trạng thái trống tốt hơn
Có ý tưởng nào không? Hãy để lại một vấn đề trên GitHub.
Liên kết & Phản hồi
- Cài đặt: Cài đặt FireScope
- Mã nguồn: Xem trên GitHub
Tôi rất muốn nghe ý kiến của bạn. Hãy thử nó trên một dự án thực tế, cho tôi biết những gì còn thiếu, và nếu bạn gặp bất kỳ vấn đề nào, vui lòng mở một vấn đề. PR rất được hoan nghênh 🙏
Cảm ơn bạn đã đọc!
