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 đã ghi lại dưới dạng tệp JSON

Bảng điều khiển Recorder (Ghi lại) hiện hỗ trợ nhập và xuất các bản ghi luồng người dùng dưới dạng tệp JSON. Việc bổ sung này giúp bạn dễ dàng chia sẻ luồng người 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 âm đó. Sau khi ghi lại một 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 xuống dưới dạng tệp JSON.
Xuất dưới dạng @puppeteer/tập lệnh phát lại. Tải bản ghi xuống dưới dạng tập lệnh Puppeteer Replay.
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 để 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ới Chromium: 1257499

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

Lớp phủ lớp cho phép kiểm soát các tệp CSS của bạn một cách rõ ràng hơ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 với các cơ sở mã lớn, hệ thống thiết kế và khi quản lý các 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 Styles (Kiểu), bạn có thể xem từng lớp và kiểu của từng lớp.

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

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

Vấn đề với 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 và 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 cách hiển thị các thuộc tính tư nhân

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

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

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

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

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

Bộ nhớ đệm cho thao tác tiến/lùi giờ đây 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, map.get và thẻ HTML. (1297101, 1297491, 1293807, 1296983)
Sửa lỗi đánh dấu không chính xác khi nhấp đúp vào từ và hoàn tác tự động hoàn thành. (1298437, 1298667)
Sửa phím tắt cho nhận xét trong bảng điều khiển Nguồn. (1296535)
Bật lại tính năng hỗ trợ sử dụng phím Alt (Tuỳ chọn) cho chế độ nhiều lựa chọn trong bảng điều khiển Nguồn. (1304070)

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

Ngoài chế độ điều hướng hiện có, bảng điều khiển Lighthouse hiện hỗ trợ thêm 2 chế độ để đo lường luồng người dùng, đó là 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 bản minh hoạ này. Chọn chế độ Timespan (Khoảng thời gian) rồi nhấp vào Start timespan. Trên trang này, nhấp vào một tách cà phê và kết thúc khoảng thời gian. Hãy đọc báo cáo để tìm hiểu Tổng thời gian chặn và Điểm số tổng hợp về mức thay đổi bố cục do hoạt động tương tác gây ra.

Mỗi chế độ có các trường hợp sử dụng, lợi ích và hạn chế riêng biệt. 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ới Chromium: 772558

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.