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 (Trình ghi) hiện hỗ trợ nhập và xuất bản ghi luồng người dùng dưới dạng tệp JSON. Tính năng 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 khi 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 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 tuỳ 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 xếp chồng trong ngăn Kiểu

Lớp xếp chồng cho phép kiểm soát rõ ràng hơn các tệp CSS để ngăn xung đột về tính chất cụ thể 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 xếp chồ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ụ của Chrome 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 bộ 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, DevTools sẽ đánh giá và hiển thị đúng cách 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 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

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:

  • Giờ đây, Bộ nhớ đệm cho thao tác tiến/lùi sẽ hiển thị mã phần mở rộng đã chặn bfcache nếu có.( 1284548)
  • Khắc phục 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 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)
  • Khắc phục phím tắt 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 (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ế độ đ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à dấu 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 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 Bắt đầu khoảng thời gian. Trên trang, hãy nhấp vào một ly cà phê rồi 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à Sự thay đổi bố cục tích luỹ do lượt 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.

Dấu thời gian và chế độ ả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 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

Sử dụng các lựa chọn sau để thảo luận về các tính năng mới, bản cập nhật hoặc bất cứ điều gì 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.