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

Ghi lại các sự kiện nhấp đúp và nhấp chuột phải trong bảng điều khiển Máy ghi âm

Giờ đây, bảng điều khiển Recorder (Trình ghi âm) có thể ghi lại các sự kiện nhấp đúp và nhấp chuột phải.

Ghi lại các sự kiện nhấp đúp và nhấp chuột phải trong bảng điều khiển Máy ghi âm

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 trên trình đơn theo bối cảnh

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

  • Thao tác Double-click (Nhấp đúp) được chụp 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

Chế độ tổng quan nhanh và khoảng thời gian 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 tải trang.

Chế độ tổng quan nhanh và khoảng thời gian 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 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 hoạt động tương tác của người dùng.
  • Báo cáo Tổng quan 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 Khoảng thời gian bắt đầu. 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 cho biết các tương tác của người dùng.

Chế độ khoảng thời gian

Xem mục 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 mỗi 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 khả năng kiểm soát 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 của bạn thay vì vị trí con trỏ vị trí.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 bất kỳ vị trí nào trong đường đi và phóng to khu vực mong muốn ngay lập tức.

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 của bạn thông qua bảng điều khiển này.

Vấn đề về Chromium: 1313382

Xác nhận để xoá một bản ghi hoạt động biểu diễn

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.

Xác nhận để xoá một bản ghi hoạt động biểu diễn

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 Phần tử dựa trên lựa chọn ưu tiên của mình.

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 sự cố hỗ trợ tiếp cận, thì giờ đây, bạn có thể kéo ngăn này lên phía trước để truy cập dễ dàng 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ụ cho nhà phát triển hiện hỗ trợ việc 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 Styles (Kiểu), hãy nhấp vào bản xem trước màu bất kỳ để mở một công cụ chọn màu. Sử dụng công cụ chọn màu để chọn màu ở mọi nơi.

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 cá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 và chạy mã. Bản xem trước cùng dòng hiển thị chính xác các giá trị ax. 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 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 chế độ này cho những trình xác thực có giao thức ctap2 hỗ trợ khoá thường trú.

 Hỗ trợ các 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

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 của debugger (bên phải) bằng 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:

Dưới đâ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ể:

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

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

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

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 và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

  • Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59