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 (Ghi lại) 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 rồi 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

Để tìm 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 sau:

  • Lượt nhấp đúp được thu thậ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 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 sự cố với 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 việc 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 người dùng:

  • Báo cáo Điều hướng phân tích một lượt tải trang. Thành phần điều hướng là loại báo cáo phổ biến nhất. Tất cả cá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 Ả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ế độ Timespan (Khoảng thời gian) rồi nhấp vào Start timespan (Bắt đầu khoảng thời gian). Cuộ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ề hoạt động tương tác của người dùng.

Chế độ khoảng thời gian

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 riêng biệt, lợi ích và hạn chế của từng chế độ.

Vấn đề với Chromium: 1291284

Nội dung 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 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í đầ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 bất kỳ vị trí nào trên kênh và Phóng to ngay 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 của trang web thông qua bảng điều khiển.

Vấn đề với Chromium: 1313382

Xác nhận bạn muốn xoá bản ghi buổi 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á bản ghi hiệu suất.

Xác nhận bạn muốn xoá bản ghi buổi biểu diễn

Vấn đề với 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 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 trong 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, thì giờ đây, bạn có thể kéo ngăn 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ới 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ợ 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 cứ đâu.

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

Vấn đề với 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ị bản xem trước các giá trị cùng dòng một cách chính xác.

Trong ví dụ này, hàm double có tham số đầu vào a và biến x. Đặt điểm ngắt ở 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ới 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 dành cho trình xác thực ảo.

Theo mặc định, hộp đánh dấu này bị tắt. 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ới 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 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 (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ới 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 thời gian:

Dưới đây là một vài bản sửa lỗi trên bản đồ nguồn để cải thiện trải nghiệm gỡ lỗi chung:

  • Liên kết chính xác giữa vị trí và độ lệch của tập lệnh cùng dòng và 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 URL tương đối bằng URL của khung

Các sự cố với Chromium: 1319828, 1318635, 1305475

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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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