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 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 tập hợp các điểm cải tiến được nhiều người mong đợi đối với bảng điều khiển Network (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 rất mong chờ và được lựa chọn kỹ lưỡng từ danh sách nội dung tồn đọng mở rộng trên công cụ theo dõi lỗi của Chromium và giúp bảng điều khiển trở nên dễ truy cập, trực quan và cung cấp nhiều thông tin hơn.
Với những tính năng mới này, bảng điều khiển Mạng giúp nhà phát triển web có thể:
- Chỉ tập trung vào các yêu cầu mạng liên quan.
- Tìm hiểu 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à xử lý các lỗi về yêu cầu.
- Tìm hiểu về phản hồi cho 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 đối với tiện ích của Chrome
Tiện ích của Chrome có thể tạo các yêu cầu mạng riêng và 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, các yêu cầu này có thể sẽ không liên quan đến bạn. Trước đây, cách duy nhất để ẩn những người dùng này là sử dụng bộ lọc -scheme:chrome-extension hoặc gỡ lỗi ở chế độ Ẩn danh.
Từ Chrome 117, việc này trở nên dễ dàng hơn. Để sắp xếp gọn gàng bảng điều khiển Mạng, Công cụ cho nhà phát triển hiện cung cấp một hộp đánh dấu để loại trừ các yêu cầu tiện ích của Chrome.
Chúng tôi vẫn đang tiếp tục 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 chế độ này theo mặc định, với ý tưởng là 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 các URL tiện ích của Chrome có thể kích hoạt yêu cầu. Điều này cũng có thể gây ra khó khăn cho các nhà phát triển tiện ích. Do đó, trạng thái mặc định được đặt thành "disabled".
Khi bật hộp đánh dấu này, danh sách yêu cầu của bạn sẽ gọn gàng hơn, bớt gây mất tập trung 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 thú vị 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 ý nghĩa của chúng có thể gây bất tiện. Công cụ cho nhà phát triển đã ra mắt một tính năng nâng cao hữu ích: khi bạn di con trỏ lên 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 tiêu đề đó.
Văn bản trạng thái cũng hiển thị trong chế độ xem tiêu đề ngay bên cạnh mã. Mặc dù trước đây chỉ hỗ trợ HTTP/1.1, nhưng các tính năng này hiện đã được mở rộng cho HTTP/2 và HTTP/3. Những điều chỉnh tưởng chừng như nhỏ này lại có tác động đáng kể, giúp tiết kiệm thời gian và cho phép bạn tập trung vào việc gỡ lỗi thay vì tìm kiếm ý nghĩa của mã.
Tăng cường khả năng hiển thị lỗi
Chúng tôi đã cải thiện để bạn dễ dàng phát hiện và xử lý lỗi một cách nhanh chóng mà không cần đào sâu vào bảng điều khiển. Để làm được điều này, thay vì chỉ làm nổi bật các 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ỉ dẫn để thu hút sự chú ý đến lỗi yêu cầu, chẳng hạn như những lỗi có mã trạng thái là 404. Những chỉ báo tinh vi nhưng hữu ích này sẽ khiến lỗi dễ nhận thấy hơn, đảm bảo bạn không bỏ qua những vấn đề quan trọng.
Tạo các loại phụ JSON tạo đẹp
Quá trình phát triển web thường xuyên kiểm tra phản hồi JSON nhưng việc đọc JSON chưa được định dạng thô rất bất tiện. Việc xử lý những 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 những phản hồi này xuất hiện trong một dòng. Để giúp mọi việc trở nên dễ dàng hơn, Công cụ cho nhà phát triển đã ra mắt một bản trình bày có thể thu gọn và 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 dựa vào các công cụ bên ngoài. Thiết kế mới này mang đến một cách trình bày đơn giản và dễ đọc.
Phản hồi tích cực từ cộng đồng
Mặc dù các tính năng này chỉ mới ở giai đoạn đầu trong quá trình sử dụng, nhưng phản hồi của cộng đồng chủ yếu nhận được rất nhiều phản hồi tích cực. Việc triển khai thành công của họ đã khiến nhiều người dùng hài lòng với những cải tiến, nâng cao trải nghiệm của họ một cách đáng kể. Bạn có thể đọc một số câu trả lời trên X:
"Ồ, thật tuyệt! ChromeDevTools đã nâng tầm trò chơi của mình 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 hơn trong việc nắm bắt sự cố của yêu cầu mạng." – TribalIdeas trên X
"Gần đây, công cụ này cực kỳ 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à tiện ích ngữ pháp."-MrAhmadAwais trên X
Bạn đã sẵn sàng khám phá các tính năng mới này? Hãy chuyển đến Công cụ của Chrome cho nhà phát triển để tự mình 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 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 cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.
- Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác
> Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Tweet tại @ChromeDevTools.
- Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.