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

Giờ đây, bảng điều khiển Trình ghi 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 lại và cố gắng thực hiện các bước sau:

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

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

  • Nhấp đúp được ghi nhận là type: doubleClick.
  • Sự kiện nhấp chuột phải được ghi nhận là 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.

Các vấn đề về Chromium: 1300839, 1322879, 1299701, 1323688

Chế độ dấu thời gian và ả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 thời gian tải trang.

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

Giờ đây, bảng điều khiển Lighthouse 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 bất kỳ, thường chứa các 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. Sau khi 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 hoạt động tương tác của người dùng.

Chế độ khoảng thời gian

Hãy xem phần 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 biệt 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 chế độ kiểm soát mức thu phóng trong bảng điều khiển Thông tin chi tiết về hiệu suất

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

Xem 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 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, Công cụ cho nhà phát triển sẽ hiện một 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 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 Phần tử theo ý muốn.

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

Sắp xếp lại 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àu trong trình duyệt.

Trong ngăn Kiểu, hãy nhấp vào bản xem trước màu bất kỳ để mở công cụ chọn màu. Sử dụng công cụ chọn màu để chọn màu ở 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

Giờ đây, trình gỡ lỗi sẽ 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 mộ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ợ các 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.

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

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

Vấn đề về Chromium: 1321803

Các 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 Nguồn:

  • Bật/tắt thanh bên điều hướng (bên trái) bằng tổ hợp phím Control/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 Control/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ụ về 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 React DevTools (Công cụ cho nhà phát triển React) được bật

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ể:

  • Ánh xạ chính xác giữa vị trí và độ lệch 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 hình
  • Giải quyết đúng cách các URL tương đối bằng URL của khung

Các 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 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.