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 các luồng người dùng đã ghi dưới dạng tệp JSON

Giờ đây, bảng điều khiển Trình ghi hỗ trợ nhập và xuất bản ghi quy trình 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 và có thể hữu ích cho việc báo cáo lỗi.

Ví dụ: hãy tải tệp JSON này xuống. Bạn có thể nhập tệp 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 lựa chọn 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 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 Trình ghi

Vấn đề về Chromium: 1257499

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

Lớp xếp tầng cho phép bạn kiểm soát rõ ràng hơn các tệp CSS để ngăn chặn xung đột về độ cụ thể của kiểu. Điều này đặc biệt hữu ích đối 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 ứng dụng.

Trong ví dụ này, có 3 lớp xế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 hiệu 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ề 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 một bản xem trước màu bất kỳ để thay đổi định dạng màu. Định dạng màu HWB được thêm vào.

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

hàm màu hwb()

Cải thiện cách 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 các phương thức truy cập riêng tư. Trước đây, bạn không thể mở rộng các lớp có phương thức truy cập riêng tư trong Bảng điều khiển và bảng Nguồn.

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

Các vấn đề về Chromium: 1296855, https://crbug.com/1303407

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

Sau đây là một số điểm 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ã nhận dạng của tiện ích chặn bfcache khi có.( 1284548)
  • Hỗ trợ tính năng tự động hoàn thành cho các đối tượng tương tự như mảng, tên lớp CSS, map.get và thẻ HTML. (1297101, 1297491, 1293807, 1296983)
  • Đã khắc phục lỗi đánh dấu không chính xác khi nhấp đúp vào từ và huỷ thao tác tự động hoàn thành. (1298437, 1298667)
  • Khắc phục phím tắt cho nhận xét trong bảng điều khiển Nguồn. (1296535)
  • Bật lại chế độ hỗ trợ sử dụng phím Alt (Options) để chọn nhiều mục trong bảng điều khiển Nguồn. (1304070)

[Thử nghiệm] Chế độ dấu thời gian và ảnh 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 Lighthouse hiện hỗ trợ thêm 2 chế độ để đo lường luồng người dùng – khoảng thời gian và ả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 các lượt tương tác của người dùng. Mở trang bản minh hoạ này. Chọn chế độ Khoảng thời gian rồi nhấp vào Bắt đầu khoảng thời gian. Trên trang này, hãy nhấp vào một cốc cà phê và 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à Mức thay đổi bố cục tích luỹ do hoạt động tương tác gây ra.

Mỗi chế độ đều có các 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 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 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.

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.