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

Jecelyn Yeen

Ghi lại sự kiện nhấp đúp và nhấp chuột phải trong bảng điều khiển Trình ghi

Bảng điều khiển Trình ghi hiện có thể ghi lại các sự kiện nhấp đúp và nhấp chuột phải.

Ghi lại sự kiện nhấp đúp và nhấp chuột phải trong bảng điều khiển Trình ghi

Trong ví dụ này, hãy bắt đầu ghi và cố gắng thực hiện các bước sau:

  • Nhấp đúp vào thẻ để phóng to thẻ đó
  • Nhấp chuột phải vào thẻ rồi chọn một hành động trong trình đơn theo bối cảnh

Để hiểu cách Trình ghi ghi lại các sự kiện này, hãy mở rộng các bước:

  • Thao tác nhấp đúp được ghi lại dưới dạng type: doubleClick.
  • Sự kiện Nhấp chuột phải được ghi lại dưới dạng type: click nhưng thuộc tính button được đặt thành secondary. Giá trị button của một lượt nhấp chuột thông thường là primary.

Vấn đề về Chromium: 1300839, 1322879, 1299701, 1323688

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

Giờ đây, bạn có thể sử dụng Lighthouse để đo lường hiệu suất của trang web ngoài việc tải trang.

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

Bảng điều khiển Lighthouse hiện hỗ trợ 3 chế độ đo lường luồng người dùng:

  • Báo cáo Điều hướng phân tích một lượt tải trang. Điều hướng là loại báo cáo phổ biến nhất. Tất cả báo cáo Lighthouse trước phiên bản hiện tại đều là báo cáo điều hướng.
  • Báo cáo Khoảng thời gian phân tích một khoảng thời gian tuỳ ý, thường chứa các lượt tương tác của người dùng.
  • Báo cáo Ảnh chụp nhanh phân tích trang ở một trạng thái cụ thể, thường là sau khi người dùng tương tác với trang đó.

Ví dụ: hãy đo lường hiệu suất của việc thêm mặt hàng vào giỏ hàng trên 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. Di chuyển và thêm một vài mặt hàng vào giỏ hàng. Khi bạn hoàn tất, hãy nhấp vào Kết thúc khoảng thời gian để tạo báo cáo Lighthouse về các lượt tương tác của người dùng.

Chế độ khoảng thời gian

Hãy xem bài viết Luồng người dùng trong Lighthouse để tìm hiểu về các trường hợp sử dụng, lợi ích và hạn chế riêng của từng chế độ.

Vấn đề về Chromium: 1291284

Thông tin cập nhật về Thông tin chi tiết về hiệu suất

Cải thiện tính năng điều khiển thu phóng trong bảng điều khiển Thông tin chi tiết về hiệu suất

Giờ đây, DevTools sẽ thu phóng dựa trên con trỏ chuột thay vì vị trí đầu phát.Với tính năng thu phóng dựa trên con trỏ mới nhất, bạn có thể di chuyển chuột đến vị trí bất kỳ trong bản nhạc và thu phóng ngay đến khu vực mong muốn.

Hãy xem phần Thông tin chi tiết về hiệu suất để tìm hiểu cách nhận thông tin chi tiết hữu ích và cải thiện hiệu suất của trang web bằng bảng điều khiển này.

Vấn đề về Chromium: 1313382

Xác nhận xoá bản ghi hiệu suất

Giờ đây, DevTools sẽ hiển thị hộp thoại xác nhận trước khi xoá bản ghi hiệu suất.

Xác nhận xoá bản ghi hiệu suất

Vấn đề về Chromium: 1318087

Sắp xếp lại các ngăn trong bảng điều khiển Phần tử

Giờ đây, bạn có thể sắp xếp lại các ngăn trong bảng điều khiển Elements (Thành phần) theo lựa chọn ưu tiên của mình.

Ví dụ: khi bạn mở DevTools trên màn hình hẹp, ngăn Hỗ trợ tiếp cận sẽ bị ẩn dưới nút Hiện thêm. Nếu thường xuyên gỡ lỗi các vấn đề về hỗ trợ tiếp cận, giờ đây, bạn có thể kéo ngăn này ra trước để dễ dàng truy cập hơn.

Sắp xếp lại các ngăn trong bảng điều khiển Phần tử

Vấn đề về Chromium: 1146146

Chọn màu bên ngoài trình duyệt

Công cụ dành cho nhà phát triển hiện hỗ trợ chọn màu bên ngoài trình duyệt. Trước đây, bạn chỉ có thể chọn một màu trong trình duyệt.

Trong ngăn Styles (Kiểu), hãy nhấp vào bất kỳ bản xem trước màu nào để mở công cụ chọn màu. Sử dụng công cụ chọn màu để chọn màu từ bất kỳ đâu.

Chọn màu bên ngoài trình duyệt

Vấn đề về Chromium: 1245191

Cải thiện tính năng xem trước giá trị cùng dòng trong quá trình gỡ lỗi

Trình gỡ lỗi hiện hiển thị chính xác bản xem trước giá trị cùng dòng.

Trong ví dụ này, hàm double có một tham số đầu vào a và một biến x. Đặt điểm ngắt tại dòng return rồi chạy mã. Bản xem trước cùng dòng hiển thị chính xác các giá trị a và x. Trước đây, trình gỡ lỗi không hiển thị giá trị x trong bản xem trước cùng dòng.

Cải thiện tính năng xem trước giá trị cùng dòng trong quá trình gỡ lỗi

Vấn đề về Chromium: 1316340

Hỗ trợ blob lớn cho trình xác thực ảo

Thẻ WebAuthn hiện có hộp đánh dấu Hỗ trợ blob lớn mới cho trình xác thực ảo.

Hộp đánh dấu này bị tắt theo mặc định. Bạn chỉ có thể bật tính năng này cho trình xác thực có giao thức ctap2 hỗ trợ khoá thường trú.

Hỗ trợ blob lớn cho trình xác thực ảo

Vấn đề về Chromium: 1321803

Phím tắt mới trong bảng điều khiển Nguồn

Hiện có 2 phím tắt mới trong bảng điều khiển Nguồn:

  • Bật/tắt thanh bên điều hướng (bên trái) bằng tổ hợp phím Ctrl/Command + Shift + Y
  • Bật/tắt thanh bên trình gỡ lỗi (bên phải) bằng tổ hợp phím Ctrl/Command + Shift + H

Phím tắt mới cho bảng điều khiển Nguồn

Vấn đề về Chromium: 1226363

Cải tiến bản đồ nguồn

Trước đây, nhà phát triển gặp phải lỗi ngẫu nhiên trong quá trình:

  • Gỡ lỗi bằng ví dụ Codepen
  • Xác định vị trí nguồn của các vấn đề về hiệu suất trong ví dụ về Codepen
  • Thiếu thẻ Component (Thành phần) khi bật React DevTools

Sau đây là một số bản sửa lỗi trên bản đồ nguồn để cải thiện trải nghiệm gỡ lỗi tổng thể:

  • Sửa mối liên kết giữa vị trí và độ dời cho tập lệnh nội tuyến và vị trí nguồn
  • Sử dụng thông tin dự phòng cho vị trí văn bản của khung
  • Giải quyết đúng cách các URL tương đối bằng URL của khung

Vấn đề về Chromium: 1319828, 1318635, 1305475

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.

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.