Tính năng mới trong Công cụ cho nhà phát triển (Chrome 99)

Điều tiết các yêu cầu WebSocket

Bảng điều khiển Mạng hiện hỗ trợ tính năng điều tiết các yêu cầu ổ cắm web. Trước đây, tính năng điều tiết mạng không hoạt động trên các yêu cầu ổ cắm web.

Mở bảng điều khiển Network (Mạng), nhấp vào một yêu cầu web socket rồi mở thẻ Messages (Tin nhắn) để quan sát quá trình chuyển tin nhắn. Chọn 3G chậm để điều tiết tốc độ.

Vấn đề về Chromium: 423246

Ngăn API báo cáo mới trong Bảng điều khiển ứng dụng

Sử dụng ngăn API báo cáo mới để theo dõi các báo cáo được tạo trên trang của bạn và trạng thái của các báo cáo đó.

Reporting API được thiết kế để giúp bạn theo dõi các lỗi vi phạm bảo mật trên trang, các lệnh gọi API không dùng nữa và nhiều thông tin khác.

Mở một trang sử dụng API Báo cáo (ví dụ: trang minh hoạ). Trong bảng điều khiển Application (Ứng dụng), hãy cuộn xuống phần Background services (Dịch vụ nền) rồi chọn ngăn Report API (API báo cáo).

Phần Báo cáo cho bạn thấy danh sách các báo cáo được tạo trên trang của bạn và trạng thái của các báo cáo đó. Hãy nhấp vào báo cáo đó để xem thông tin chi tiết.

Phần Endpoints (Điểm cuối) cung cấp thông tin tổng quan về tất cả các điểm cuối được định cấu hình trong tiêu đề Reporting-Endpoints.

Vấn đề về Chromium: 1205856

Hỗ trợ đợi cho đến khi phần tử hiển thị/có thể nhấp vào trong bảng điều khiển Máy ghi âm

Khi phát lại bản ghi luồng người dùng, bảng điều khiển Recorder (Trình ghi) hiện sẽ đợi cho đến khi phần tử hiển thị hoặc có thể nhấp vào trong khung nhìn hoặc cố gắng tự động cuộn phần tử vào khung nhìn trước khi phát lại bước. Trước đây, quá trình phát lại sẽ không thành công ngay lập tức.

Dưới đây là ví dụ về trình đơn ngoài màn hình được đặt bên ngoài khung nhìn và trượt vào khi được kích hoạt. Luồng người dùng là bật/tắt trình đơn và nhấp vào mục trong trình đơn. Trước đây, tính năng phát lại sẽ không thành công ở bước cuối cùng vì mục trình đơn vẫn đang trượt vào và chưa hiển thị trong khung nhìn. Lỗi này hiện đã được khắc phục.

Vấn đề về Chromium: 1257499

Định kiểu, định dạng và lọc bảng điều khiển tốt hơn

Định kiểu đúng cách cho thông điệp nhật ký bằng mã thoát ANSI

Giờ đây, bạn có thể sử dụng chuỗi ký tự thoát ANSI để tạo kiểu đúng cách cho thông báo trên bảng điều khiển. Trước đây, bảng điều khiển Công cụ cho nhà phát triển chỉ hỗ trợ rất hạn chế (và bị hỏng một phần) cho các chuỗi ký tự thoát ANSI.

Các nhà phát triển Node.js thường tô màu cho thông điệp nhật ký thông qua trình tự thoát ANSI, thường là nhờ một số thư viện định kiểu như chalk, colors, ansi-colors, kleur, v.v.

Với những thay đổi này, giờ đây, bạn có thể gỡ lỗi ứng dụng Node.js một cách liền mạch bằng DevTools, với thông báo bảng điều khiển được tô màu phù hợp. Hãy mở bản minh hoạ này để tự xem!

Để tìm hiểu thêm về cách định dạng và định kiểu thông báo trong bảng điều khiển bằng DevTools, hãy xem tài liệu về cách định dạng và định kiểu thông báo trong Bảng điều khiển.

Vấn đề về Chromium: 1282837, 1282076

Hỗ trợ đúng cách thông số định dạng %s, %d, %i và %f

Console hiện thực hiện đúng cách các lượt chuyển đổi loại %s, %d, %i và %f như được chỉ định trong Tiêu chuẩn của Console. Trước đây, kết quả cuộc trò chuyện không nhất quán.

Vấn đề về Chromium: 1277944, 1282076

Bộ lọc nhóm bảng điều khiển trực quan hơn

Giờ đây, khi bạn lọc thông báo trên bảng điều khiển, một thông báo trên bảng điều khiển sẽ xuất hiện nếu nội dung thông báo của thông báo đó khớp với bộ lọc hoặc tiêu đề của nhóm (hoặc nhóm đối tượng cấp trên) khớp với bộ lọc. Trước đây, tiêu đề nhóm bảng điều khiển sẽ xuất hiện bất kể bộ lọc.

Ngoài ra, nếu thông báo trên bảng điều khiển xuất hiện, thì nhóm (hoặc nhóm đối tượng cấp trên) có thông báo đó cũng sẽ xuất hiện.

Vấn đề về Chromium: 1068788

Cải tiến bản đồ nguồn

Gỡ lỗi tiện ích của Chrome bằng tệp bản đồ nguồn

Giờ đây, bạn có thể gỡ lỗi tiện ích Chrome bằng các tệp bản đồ nguồn. Trước đây, DevTools chỉ hỗ trợ bản đồ nguồn nội tuyến để gỡ lỗi tiện ích Chrome.

Vấn đề về Chromium: 212374

Cải thiện cây thư mục nguồn trong bảng điều khiển Nguồn

Cây thư mục nguồn trong bảng điều khiển Sources (Nguồn) hiện đã được cải thiện với cấu trúc thư mục và cách đặt tên ít lộn xộn hơn (ví dụ: “../”, “./”, v.v.). Về cơ bản, đây là kết quả của việc chuẩn hoá URL nguồn tuyệt đối trong bản đồ nguồn.

Vấn đề về Chromium: 1284737

Hiển thị các tệp nguồn worker trong bảng điều khiển Nguồn

Các tệp nguồn của Worker (ví dụ: web worker, service worker) có SourceURL tương đối giờ đây được hiển thị trong bảng điều khiển Nguồn. Trước đây, các tệp nguồn của worker không được xử lý đúng cách.

Vấn đề về Chromium: 1277002

Bản cập nhật về tính năng Tự động chuyển sang giao diện tối của Chrome

Giao diện người dùng mô phỏng Giao diện tối tự động hiện đã được đơn giản hoá. Giờ đây, đây là một hộp đánh dấu, trước đây là một trình đơn thả xuống.

Ngoài ra, khi bạn bật chế độ Tự động chuyển sang giao diện tối, trình đơn thả xuống Mô phỏng prefers-color-scheme sẽ bị tắt và tự động đặt thành prefers-color-scheme: dark.

Chrome 96 ra mắt Bản dùng thử theo nguyên gốc cho Giao diện tối tự động trên Android. Với tính năng này, trình duyệt sẽ áp dụng giao diện tối được tạo tự động cho các trang web có giao diện sáng, khi người dùng đã chọn sử dụng giao diện tối trong Hệ điều hành.

Vấn đề về Chromium: 1243309

Công cụ chọn màu và ngăn chia tách phù hợp với thao tác chạm

Giờ đây, bạn có thể chọn màu và đổi kích thước Ngăn trong Công cụ cho nhà phát triển bằng ngón tay hoặc bút cảm ứng trên thiết bị màn hình cảm ứng.

Sau đây là ví dụ được chụp bằng màn hình cảm ứng của thiết bị Google Pixelbook.

Vấn đề về Chromium: 1284245, 1284995

Thông tin nổi bật khác

Sau đây là một số bản sửa lỗi đáng chú ý trong bản phát hành này:

• Khắc phục vấn đề chỉnh sửa cookie trong ngăn Cookie. (1290196)
• Sử dụng Shift + Tab để chọn lệnh trước đó trong Trình đơn lệnh. (1278743)
• Báo cáo các vấn đề về yêu cầu kiểm tra trước CORS trong thẻ Vấn đề. (1272445).
• Báo cáo vấn đề về Gợi ý cho ứng dụng tác nhân người dùng trong thẻ Vấn đề. (1219359).
• Khắc phục hành vi Shift + Delete và Page up / Page down trong bảng điều khiển Sources (Nguồn) và Console (Bảng điều khiển). (1278461, 1285662)
• Đóng hộp thoại chỉnh sửa điểm ngắt khi xoá điểm ngắt trong bảng điều khiển Sources (Nguồn). (922513)
• Không cần tải lại khi chuyển đổi giao diện sáng/tối trong Công cụ cho nhà phát triển. (1278738)

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 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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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 để thảo luận về các tính năng mới, bản cập nhật hoặc bất cứ điều gì 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác more_vert > Trợ giúp > Báo cáo sự cố trong Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @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.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.