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

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

Bảng điều khiển Network (Mạng) hiện hỗ trợ điều tiết các yêu cầu về ổ 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ổng web.

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

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

Vấn đề về Chromium: 423246

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

Hãy 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 đó.

API Báo cáo đượ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 còn được dùng nữa, v.v.

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 Reporting API (API báo cáo).

Mục 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 về báo cáo.

Phần Điểm cuối cung cấp cho bạn 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.

Ngăn API báo cáo

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 Máy ghi âm giờ đây sẽ đợi cho đến khi phần tử hiển thị hoặc có thể nhấp 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, bạn không thể phát lại ở bước cuối cùng vì mục trong trình đơn vẫn trượt vào và chưa xuất hiện 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

Tạo kiểu thông điệp nhật ký đúng cách 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 trình tự thoát ANSI.

Các nhà phát triển Node.js thường tô màu thông điệp nhật ký thông qua các chuỗi ký tự thoát ANSI, thường với sự trợ giúp của một số thư viện định kiểu như chalk, màu sắc, ansi-colors, kleur, v.v.

Với những thay đổi này, bạn hiện có thể gỡ lỗi ứng dụng Node.js một cách liền mạch bằng Công cụ cho nhà phát triển, với các thông báo được chỉnh màu phù hợp trên bảng điều khiển. Hãy mở demo này để tự xem!

Để tìm hiểu thêm về việc định dạng và Hãy tham khảo tài liệu định dạng và định kiểu thông báo trên bảng điều khiển tạo kiểu bằng Công cụ cho nhà phát triển.

định kiểu 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%f

Giờ đây, Console sẽ thực hiện đúng cách các lượt chuyển đổi theo loại %s, %d, %i%f như được chỉ định trong Console Standard. Trước đây, kết quả cuộc trò chuyện không nhất quán.

hỗ trợ thông số định dạng trong thông báo của bảng điều khiể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 trên bảng điều khiển sẽ xuất hiện mặc dù bộ lọc đó sử dụng.

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.

bộ lọc nhóm bảng điều khiể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 của Chrome bằng các tệp bản đồ nguồn. Trước đây, Công cụ cho nhà phát triển chỉ hỗ trợ sơ đồ nguồn cùng dòng để gỡ lỗi tiện ích của Chrome.

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

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 và cách đặt tên thư mục í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á các URL nguồn tuyệt đối trong bản đồ nguồn.

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

Vấn đề về Chromium: 1284737

Hiển thị tệp nguồn của 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 worker không được xử lý đúng cách.

ALT_TEXT_HERE

Vấn đề về Chromium: 1277002

Bản cập nhật Giao diện tối tự động của Chrome

Giờ đây, giao diện người dùng mô phỏng Giao diện tối tự động đã được đơn giản hoá. Hiện tại, đâ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 Giao diện tối tự động, trình đơn thả xuống

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.

Mô phỏng Giao diện tối tự động

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

Nội dung nổi bật khác

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

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

  • 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ông cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > Trợ giúp > Báo cáo vấn đề về 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 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 Mẹo video trên YouTube trong Công cụ cho nhà phát triển.

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

Danh sách mọi nội dung được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.