Trang này được dịch bởi Cloud Translation API.

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

Jecelyn Yeen

Nhập và xuất luồng người dùng được ghi lại dưới dạng tệp JSON

Bảng điều khiển Recorder hiện đã hỗ trợ việc nhập và xuất các bản ghi luồng người dùng dưới dạng tệp JSON. Thao tác thêm này giúp việc chia sẻ luồng người dùng trở nên dễ dàng hơn và có thể hữu ích cho việc báo cáo lỗi.

Ví dụ: tải tệp JSON này xuống. Bạn có thể nhập dữ liệu này bằng nút nhập và phát lại luồng người dùng.

Ngoài ra, bạn cũng có thể xuất bản ghi đó. Sau khi ghi lại luồng người dùng, hãy nhấp vào nút xuất. Có 3 cách xuất:

Xuất dưới dạng tệp JSON. Tải bản ghi âm xuống dưới dạng tệp JSON.
Xuất dưới dạng tập lệnh @puppeteer/replay. Tải bản ghi xuống dưới dạng tập lệnh Phát lại Pugpeteer.
Xuất dưới dạng tập lệnh Puppeteer . Tải bản ghi xuống dưới dạng tập lệnh Puppeteer.

Hãy tham khảo tài liệu này để tìm hiểu thêm về sự khác biệt giữa các lựa chọn này.

Các lựa chọn xuất trong bảng điều khiển Máy ghi âm

Vấn đề về Chromium: 1257499

Xem các lớp tầng trong ngăn Kiểu

Lớp phân tầng cho phép kiểm soát rõ ràng hơn các tệp CSS của bạn để ngăn chặn xung đột về đặc điểm của kiểu. Điều này đặc biệt hữu ích cho các cơ sở mã lớn, hệ thống thiết kế và khi quản lý kiểu của bên thứ ba trong các ứng dụng.

Trong ví dụ này, có 3 lớp tầng được xác định: page, component và base. Trong ngăn Kiểu, bạn có thể xem từng lớp và kiểu của lớp đó.

Nhấp vào tên lớp để xem thứ tự lớp. Lớp page có độ cụ thể cao nhất, do đó nền box có màu xanh lục.

Xem các lớp tầng trong ngăn Kiểu

Vấn đề về Chromium: 1240596

Hỗ trợ hàm màu hwb()

Giờ đây, bạn có thể xem và chỉnh sửa định dạng màu HWB trong Công cụ cho nhà phát triển.

Trong ngăn Styles (Kiểu), hãy giữ phím Shift rồi nhấp vào bản xem trước màu bất kỳ để thay đổi định dạng màu. Thêm định dạng màu HWB.

Ngoài ra, bạn có thể thay đổi định dạng màu thành HWB trong công cụ chọn màu.

Hàm màu hwb()

Cải thiện khả năng hiển thị các thuộc tính riêng tư

Giờ đây, Công cụ cho nhà phát triển sẽ đánh giá và hiển thị đúng trình truy cập riêng tư. Trước đây, bạn không thể mở rộng các lớp bằng trình truy cập riêng tư trong Bảng điều khiển và bảng điều khiển Nguồn.

tài sản riêng tư trong Console

Vấn đề về Chromium: 1296855, https://crbug.com/1303407

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:

Giờ đây, bộ nhớ đệm cho thao tác tiến/lùi sẽ hiển thị mã tiện ích đã chặn bfcache khi có.( 1284548)
Sửa tính năng hỗ trợ tự động hoàn thành cho các đối tượng giống mảng, tên lớp CSS, thẻ map.get và thẻ HTML. (1297101, 1297491, 1293807, 1296983)
Đã sửa nội dung đánh dấu không chính xác khi nhấp đúp vào các từ và huỷ tính năng tự động hoàn thành. (1298437, 1298667)
Sửa lỗi phím tắt cho nhận xét trong bảng điều khiển Sources (Nguồn). (1296535)
Bật lại chế độ hỗ trợ sử dụng phím Alt (Tuỳ chọn) để chọn nhiều mục trong bảng điều khiển Sources (Nguồn). (1304070)

[Thử nghiệm] Chế độ chụp nhanh và khoảng thời gian mới trong bảng điều khiển Lighthouse

Ngoài chế độ navigation hiện có, bảng điều khiển Lighthouse hiện hỗ trợ thêm hai chế độ đo lường luồng người dùng - timespan và snapshot (ảnh chụp nhanh).

Ví dụ: bạn có thể sử dụng báo cáo khoảng thời gian để phân tích hoạt động tương tác của người dùng. Mở trang minh hoạ này. Chọn chế độ Khoảng thời gian rồi nhấp vào Khoảng thời gian bắt đầu. Trên trang này, hãy nhấp vào một tách cà phê rồi kết thúc khoảng thời gian. Đọc báo cáo để tìm hiểu Tổng thời gian chặn và Điểm thay đổi bố cục tích luỹ do hoạt động tương tác gây ra.

Mỗi chế độ có những trường hợp sử dụng, lợi ích và hạn chế riêng. Vui lòng tham khảo tài liệu về Lighthouse để biết thêm thông tin.

Chế độ khoảng thời gian và ảnh chụp nhanh trong bảng điều khiển Lighthouse

Vấn đề về Chromium: 772558

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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > 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.