Kiểm Tra Thay Đổi Frontend với Browser (Sử Dụng Chromium Overrides)

Giới thiệu

Trong quá trình phát triển ứng dụng web, việc chờ đợi đội ngũ backend để kiểm tra các thay đổi có thể gây tốn thời gian và làm gián đoạn quy trình làm việc. Tuy nhiên, với tính năng Network Overrides trong DevTools của Chrome, bạn có thể dễ dàng kiểm tra các phản hồi API mà không cần phải liên hệ với backend. Bài viết này sẽ hướng dẫn bạn cách sử dụng tính năng này một cách hiệu quả.

Nội dung

1. Mở DevTools

Để bắt đầu, bạn cần mở DevTools trong trình duyệt Chrome. Bạn có thể làm điều này bằng cách nhấp chuột phải vào trang web và chọn Inspect. Thay vì chuyển sang tab Console, bạn hãy chuyển sang tab Sources.

2. Tạo một Sandbox

Trong tab Sources, bạn sẽ thấy một tab có tên là Overrides. Nhấp vào đó, DevTools sẽ yêu cầu bạn chọn một thư mục. Thư mục này sẽ chứa các phản hồi giả của bạn. Chọn một thư mục trống và cho phép Chrome sử dụng nó, và bạn sẽ có một sandbox để thực hiện các thử nghiệm.

3. Lấy một Phản hồi

Tiếp theo, chuyển đến tab Network, làm mới trang và tìm yêu cầu mà bạn muốn kiểm tra, ví dụ: /api/config. Nhấp chuột phải vào yêu cầu đó và chọn Save for overrides. DevTools sẽ sao chép phản hồi thực vào thư mục cục bộ của bạn.

4. Chỉnh sửa Quy Tắc

Mở file đã lưu trong Sources > Overrides và thay đổi một vài giá trị. Ví dụ, bạn có thể chuyển từ "featureEnabled": false thành "featureEnabled": true.

5. Làm mới và Kiểm Tra

Sau khi chỉnh sửa, hãy làm mới trang. Ứng dụng bây giờ sẽ hoạt động như thể backend thực sự đã trả về phản hồi đã sửa đổi của bạn. Trong tab Network, bạn sẽ thấy một biểu tượng nhỏ bên cạnh yêu cầu, cho biết rằng nó đã bị ghi đè.

6. Tắt Tính Năng

Khi bạn hoàn tất, chỉ cần bỏ chọn Enable Local Overrides trong tab Overrides. Mọi thứ sẽ trở lại phản hồi của máy chủ bình thường.

Mẹo Chuyên Nghiệp: Giả Lập Lỗi và Thời Gian Chờ

Khi đã quen với việc sử dụng Network Overrides, bạn có thể thử nghiệm sâu hơn:

• Giả lập phản hồi lỗi: Chỉnh sửa file override và thay thế nội dung bằng một JSON lỗi, ví dụ:

  Copy

  { "error": "Internal Server Error" }

  Sau đó, thay đổi tiêu đề từ 200 OK thành 500 Internal Server Error.

• Giả lập thời gian chờ: Trong tab Network, nhấp chuột phải vào yêu cầu và chọn Block request URL. Bây giờ ứng dụng của bạn sẽ hoạt động như thể máy chủ không bao giờ phản hồi. Điều này rất hữu ích để kiểm tra các loaders và các lần thử lại.

Thực Hành Tốt Nhất

• Chọn thư mục riêng biệt: Để dễ quản lý, hãy tạo một thư mục riêng biệt dành cho các phản hồi giả, giúp bạn dễ dàng tìm kiếm và sửa đổi khi cần thiết.
• Thường xuyên cập nhật phản hồi: Nếu API của bạn thường xuyên thay đổi, hãy cập nhật các phản hồi giả theo định kỳ để đảm bảo rằng bạn luôn kiểm tra các trường hợp mới.
• Sử dụng cho các tình huống thực tế: Thực hành với các trường hợp thực tế có thể giúp bạn hình dung rõ hơn cách ứng dụng của bạn sẽ hoạt động trong các tình huống khác nhau.

Những Cạm Bẫy Thường Gặp

• Quên tắt tính năng Overrides: Một trong những lỗi phổ biến là quên bỏ chọn tùy chọn Enable Local Overrides, điều này có thể gây nhầm lẫn khi bạn không biết tại sao phản hồi không như mong đợi.
• Thay đổi không đúng cách: Hãy chắc chắn rằng bạn chỉnh sửa đúng các giá trị trong file, nếu không, ứng dụng của bạn có thể gặp lỗi không mong muốn.

Mẹo Tối Ưu Hiệu Suất

• Kiểm tra hiệu suất: Sử dụng công cụ đo lường hiệu suất trong DevTools để đảm bảo rằng các thay đổi bạn thực hiện không ảnh hưởng tiêu cực đến thời gian tải trang.
• Kiểm tra trên nhiều trình duyệt: Để đảm bảo tính tương thích, hãy kiểm tra các phản hồi giả trên các trình duyệt khác nhau.

Kết luận

Tính năng Network Overrides đã biến trình duyệt của bạn thành một mini-mock server, giúp bạn thực hiện các thử nghiệm nhanh chóng mà không phải chờ đợi các thay đổi từ backend. Hãy thử nghiệm với tính năng này để nâng cao quy trình phát triển của bạn. Nếu bạn thường xuyên gặp khó khăn khi chờ đợi các thay đổi API, hãy cho Network Overrides một cơ hội - bạn có thể tiết kiệm được rất nhiều thời gian.

Câu hỏi thường gặp

• Tôi có thể sử dụng Network Overrides cho tất cả các loại API không?
  Có, bạn có thể sử dụng tính năng này cho bất kỳ API nào mà bạn có quyền truy cập.

• Có cách nào để tự động hóa quy trình này không?
  Hiện tại, Network Overrides không hỗ trợ tự động hóa, nhưng bạn có thể tạo các script để làm việc với API một cách tự động.

• Làm thế nào để khôi phục lại các thiết lập mặc định?
  Chỉ cần bỏ chọn Enable Local Overrides là bạn sẽ quay lại các phản hồi từ máy chủ bình thường.