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

Jecelyn Yeen

Đ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 di chuyể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).

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 đó. 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ợ chờ cho đến khi phần tử hiển thị/có thể nhấp vào trong bảng điều khiển Trình ghi

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. Quy trình của người dùng là bật/tắt trình đơn rồi 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 dạng, định kiểu và lọc bảng điều khiển hiệu quả 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 trình tự thoát ANSI để định 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 DevTools chỉ hỗ trợ rất hạn chế (và một phần bị hỏng) đối với các trình 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 các 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 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

Khi lọc thông báo của bảng điều khiển, thông báo của bảng điều khiển hiện sẽ xuất hiện nếu nội dung thông báo khớp với bộ lọc hoặc tiêu đề của nhóm (hoặc nhóm 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 một thông báo của bảng điều khiển xuất hiện, thì nhóm (hoặc nhóm cấp trên) mà thông báo đó thuộc về 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 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 Worker (ví dụ: worker web, worker dịch vụ) có SourceURL tương đối hiện hiển thị trong bảng điều khiển Source (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

Các bản cập nhật về Giao diện tối tự động 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 phân tách thân thiện 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 DevTools bằng ngón tay hoặc bút cảm ứng trên các thiết bị có màn hình cảm ứng.

Dưới đâ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 tổ hợp phím 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 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 more_vert 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.

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.