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 Recorder (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.

Trong ví dụ này, hãy bắt đầu ghi lại và thử 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 thao tác 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 với 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.

Bảng điều khiển Lighthouse hiện hỗ trợ 3 chế độ đo lường luồng của 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.

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, Công cụ cho nhà phát triển sẽ hiển thị hộp thoại xác nhận trước khi xoá một 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.

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.

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ó tham số đầu vào a và 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.

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 mới Hỗ trợ blob lớn 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ú.

Vấn đề về Chromium: 1321803

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

Hai phím tắt mới hiện có trong bảng điều khiển Sources (Nguồn):

• Bật/tắt thanh bên điều hướng (bên trái) bằng 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 Ctrl/Command + Shift + H

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:

• 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 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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.