Trong Công cụ của Chrome cho nhà phát triển, bảng điều khiển Mạng cung cấp cho bạn thông tin chi tiết có giá trị về hoạt động mạng của một trang web. Đây là một trong những công cụ được sử dụng thường xuyên nhất.
Bài viết này chia sẻ một số điểm cải tiến rất đáng mong đợi đối với bảng điều khiển Mạng mà Ioana Forfota và Silvia Eremia đã thực hiện trong quá trình thực tập STEP. Những điểm cải tiến này đã được chờ đợi và được chọn kỹ lưỡng từ danh sách tồn đọng rộng lớn trên công cụ theo dõi lỗi của Chromium, giúp bảng điều khiển dễ tiếp cận, trực quan và cung cấp nhiều thông tin hơn.
Với các tính năng mới này, bảng điều khiển Mạng giúp nhà phát triển web:
- Chỉ tập trung vào các yêu cầu mạng có liên quan.
- Tìm hiểu về mã trạng thái HTTP mà không cần tham chiếu bên ngoài.
- Nhanh chóng xác định và giải quyết lỗi yêu cầu.
- Tìm hiểu về phản hồi loại phụ JSON.
Hãy đọc tiếp để biết toàn bộ thông tin chi tiết!
Lọc yêu cầu về tiện ích Chrome
Các tiện ích Chrome có thể tạo các yêu cầu mạng riêng, xuất hiện cùng với các yêu cầu của trang trong bảng điều khiển Mạng. Nếu bạn không tích cực phát triển tiện ích, thì các yêu cầu này có thể không liên quan đến bạn. Trước đây, cách duy nhất để ẩn các tệp đó là sử dụng bộ lọc -scheme:chrome-extension
hoặc gỡ lỗi ở chế độ Ẩn danh.
Kể từ Chrome 117, việc này đã trở nên dễ dàng hơn. Để làm gọn bảng điều khiển Mạng, DevTools hiện cung cấp một hộp đánh dấu để loại trừ các yêu cầu của tiện ích Chrome.
Chúng tôi đang thảo luận về trạng thái mặc định của tính năng này. Ban đầu, chúng tôi cân nhắc việc bật tính năng này theo mặc định, với ý tưởng rằng tính năng này có thể nâng cao trải nghiệm cho phần lớn người dùng. Tuy nhiên, phương pháp này có thể khiến một số người dùng không biết rằng URL của tiện ích Chrome có thể kích hoạt các yêu cầu. Điều này cũng có thể gây ra thách thức cho các nhà phát triển tiện ích. Do đó, trạng thái mặc định được đặt thành "tắt".


Khi bạn bật hộp đánh dấu này, danh sách yêu cầu sẽ gọn gàng hơn, ít gây mất tập trung hơn và tập trung nhiều hơn vào các yêu cầu quan trọng nhất, nhờ đó, bạn có thể có trải nghiệm gỡ lỗi dễ chịu hơn nhiều!
Văn bản trạng thái phản hồi HTTP
Bạn cần hiểu rõ mã trạng thái HTTP để gỡ lỗi hiệu quả. Tuy nhiên, việc liên tục tìm kiếm ý nghĩa của các từ đó có thể gây bất tiện. DevTools đã giới thiệu một tính năng nâng cao hữu ích: khi bạn giữ con trỏ qua một mã trạng thái trong danh sách yêu cầu, chú giải công cụ sẽ ngay lập tức cung cấp văn bản trạng thái – một tiêu đề mô tả làm rõ ý nghĩa của mã trạng thái đó.
Văn bản trạng thái cũng xuất hiện trong chế độ xem tiêu đề ngay bên cạnh mã. Trước đây, các tính năng này chỉ có trên HTTP/1.1, nhưng hiện đã được mở rộng sang HTTP/2 và HTTP/3. Những điều chỉnh tưởng chừng như nhỏ này có tác động đáng kể, giúp bạn tiết kiệm thời gian và tập trung vào việc gỡ lỗi thay vì tìm kiếm ý nghĩa của mã.
Cải thiện khả năng hiển thị lỗi
Chúng tôi đã giúp bạn dễ dàng phát hiện và khắc phục lỗi nhanh chóng mà không cần tìm hiểu sâu vào bảng điều khiển. Để đạt được điều này, thay vì chỉ làm nổi bật thông báo lỗi bằng cách thay đổi màu văn bản, chúng tôi đã thêm các biểu tượng chỉ báo để thu hút sự chú ý đến các lỗi yêu cầu, chẳng hạn như các lỗi có mã trạng thái là 404. Những chỉ báo tinh tế nhưng hữu ích này sẽ giúp bạn dễ dàng nhận thấy lỗi hơn, đảm bảo bạn không bỏ qua các vấn đề quan trọng.
In đẹp các loại phụ JSON
Quá trình phát triển web thường liên quan đến việc kiểm tra phản hồi JSON, nhưng việc đọc JSON thô chưa định dạng rất bất tiện. Việc xử lý các phản hồi như vậy, đặc biệt là các loại phụ như ld+json
, hal+json
hoặc sparql-results+json
, có thể gây khó chịu, chẳng hạn như khi các phản hồi này xuất hiện trong một dòng. Để giúp mọi việc dễ dàng hơn, DevTools đã giới thiệu một bản trình bày có thể thu gọn, thân thiện hơn với người dùng cho các loại phụ JSON. Giờ đây, các phản hồi này được định dạng, giúp nhà phát triển không cần phải dựa vào các công cụ bên ngoài. Thiết kế lại này cung cấp một cách trình bày đơn giản và dễ đọc.


Ý kiến phản hồi tích cực từ cộng đồng
Mặc dù các tính năng này mới chỉ ở giai đoạn đầu, nhưng cộng đồng đã phản hồi rất tích cực. Việc triển khai thành công đã khiến nhiều người dùng hài lòng với những điểm cải tiến, nâng cao đáng kể trải nghiệm của họ. Bạn có thể đọc một số câu trả lời trên X:
"Ồ, thật tuyệt! ChromeDevTools vừa nâng cấp bằng cách hiển thị mã trạng thái HTTP mà con người có thể đọc được, giúp bạn dễ dàng xem vấn đề xảy ra với yêu cầu mạng hơn." –TribalIdeas trên X
"Gần đây, ứng dụng này rất hữu ích. Đặc biệt là xử lý các biểu mẫu có trình chặn quảng cáo và phần mở rộng ngữ pháp." –MrAhmadAwais trên X
Bạn đã sẵn sàng khám phá những tính năng mới này chưa? Hãy truy cập vào Công cụ của Chrome cho nhà phát triển để tự trải nghiệm bảng điều khiển Mạng nâng cao. Chúc bạn gỡ lỗi thành công!
Tải các kênh xem trước xuống
Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.
- Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
- Gửi tweet đến @ChromeDevTools.
- Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.