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

Jecelyn Yeen

Tính năng xem trước: Bảng thông tin chi tiết về hiệu suất mới

Sử dụng bảng điều khiển Thông tin chi tiết về hiệu suất để nhận thông tin chi tiết hữu ích và dựa trên trường hợp sử dụng về hiệu suất trang web của bạn.

Mở bảng điều khiển rồi bắt đầu quá trình ghi mới tuỳ theo trường hợp sử dụng của bạn. Ví dụ: hãy đo lường lượt tải trang của trang minh hoạ này.

Bảng điều khiển Thông tin chi tiết về hiệu suất mới

Sau khi ghi lại xong, bạn sẽ nhận được thông tin chi tiết về hiệu suất trong ngăn Thông tin chi tiết. Nhấp vào từng mục thông tin chi tiết (ví dụ: Yêu cầu chặn hiển thị, thay đổi bố cục) để tìm hiểu vấn đề và cách khắc phục tiềm năng.

Chuyển đến tài liệu của bảng điều khiển Thông tin chi tiết về hiệu suất để tìm hiểu thêm theo hướng dẫn từng bước.

Đây là tính năng xem trước để giúp các nhà phát triển web (đặc biệt là các chuyên gia không chuyên về hiệu suất) xác định và khắc phục các vấn đề tiềm ẩn về hiệu suất. Nhóm chúng tôi đang tích cực nghiên cứu tính năng này và chúng tôi mong nhận được ý kiến phản hồi của bạn để cải thiện hơn nữa.

Vấn đề với Chromium: 1270700

Phím tắt mới để mô phỏng các giao diện sáng và tối

Bạn hiện có thể mô phỏng giao diện sáng và tối nhanh hơn (tính năng đa phương tiện CSS prefers-color-lược đồ) bằng các phím tắt mới trong ngăn Styles.

Trước đây, bạn cần thực hiện nhiều bước hơn để mô phỏng giao diện trong thẻ Kết xuất.

Phím tắt mới để mô phỏng các giao diện sáng và tối

Vấn đề với Chromium: 1314299

Bảo mật được cải thiện trên thẻ Xem trước mạng

Công cụ cho nhà phát triển hiện áp dụng Chính sách bảo mật nội dung (CSP) trong thẻ Xem trước trong bảng Mạng.

Ví dụ: ảnh chụp màn hình đầu tiên cho thấy một trang có chứa nội dung hỗn hợp. Trang tải qua kết nối HTTPS bảo mật, nhưng biểu định kiểu tải qua kết nối HTTP không an toàn.

Theo mặc định, trình duyệt đã chặn yêu cầu biểu định kiểu. Tuy nhiên, khi bạn mở trang qua thẻ Preview (Xem trước) trong bảng điều khiển Network (Mạng), biểu định kiểu không bị chặn trước đó (do đó nền chuyển sang màu đỏ). Trang này hiện đã bị chặn như bạn mong muốn (ảnh chụp màn hình thứ hai).

Cải thiện tính bảo mật trên thẻ Xem trước mạng

Vấn đề với Chromium: 833147

Cải thiện tính năng tải lại tại điểm ngắt

Giờ đây, trình gỡ lỗi sẽ chấm dứt việc thực thi tập lệnh khi tải lại tại điểm ngắt.

Ví dụ: trước đó tập lệnh đã tham gia vào một vòng lặp vô tận khi thiết lập và tải lại tại điểm ngắt ReactDOM trong Bản minh hoạ phản ứng này. Bảng điều khiển Nguồn bị lỗi do vòng lặp vô tận.

Việc tiếp tục thực thi JavaScript sẽ gây ra rất nhiều rắc rối cho các nhà phát triển và có thể khiến trình kết xuất ở trạng thái bị hỏng. Thay đổi này điều chỉnh hành vi gỡ lỗi với các trình duyệt khác như Firefox.

Cải thiện tính năng tải lại tại điểm ngắt

Sự cố với Chromium: 1014415, 1004038, 1112863, 1134899

Thông tin cập nhật về bảng điều khiển

Xử lý lỗi thực thi tập lệnh trong Bảng điều khiển

Giờ đây, các lỗi trong quá trình đánh giá tập lệnh trong Console sẽ tạo ra các sự kiện lỗi thích hợp sẽ kích hoạt trình xử lý window.onerror và được gửi dưới dạng các sự kiện "error" trên đối tượng cửa sổ.

Xử lý lỗi thực thi tập lệnh trong Bảng điều khiển

Vấn đề với Chromium: 1295750

Xác nhận biểu thức trực tiếp bằng Enter

Sau khi nhập xong biểu thức trực tiếp, bạn có thể nhấp vào Enter để xác nhận. Trước đây, thao tác nhấn Enter dẫn đến việc thêm các dòng mới. Điều này không nhất quán với các phần khác của Công cụ cho nhà phát triển.

Để thêm một dòng mới trong trình chỉnh sửa biểu thức trực tiếp, hãy sử dụng Shift + Enter.

Xác nhận biểu thức trực tiếp bằng Enter

Vấn đề với Chromium: 1260744

Huỷ ghi lại luồng người dùng khi bắt đầu

Bạn có thể huỷ quá trình ghi trong quá trình bắt đầu ghi luồng người dùng. Trước đây, bạn không thể huỷ bản ghi.

Huỷ ghi lại luồng người dùng khi bắt đầu

Vấn đề với Chromium: 1257499

Hiển thị các phần tử giả làm nổi bật kế thừa kế thừa trong ngăn Kiểu

Xem các phần tử giả làm nổi bật kế thừa (ví dụ: ::selection, ::spelling-error, ::grammar-error và ::highlight) trong ngăn Kiểu. Trước đây, những quy tắc này không được hiển thị.

Như đã đề cập trong quy cách, khi nhiều kiểu xung đột, phân tầng sẽ xác định kiểu chiến thắng. Tính năng mới này giúp bạn hiểu tính kế thừa và mức độ ưu tiên của các quy tắc.

Hiển thị các phần tử giả làm nổi bật kế thừa kế thừa trong ngăn Kiểu

Vấn đề với Chromium: 1024156

Thông tin nổi bật khác

Dưới đây là một số sửa đổi đáng chú ý trong bản phát hành này:

  • Theo mặc định, ngăn Properties (Thuộc tính) giờ đây sẽ hiển thị các thuộc tính truy cập kèm theo giá trị. Thư mục này bị ẩn do nhầm lẫn trước đó. (1309087)
  • Giờ đây, ngăn Styles (Kiểu) sẽ hiển thị chính xác các quy tắc @support bị ghi đè ở dạng gạch ngang. Trước đây, các quy tắc không bị gạch ngang. (1298025)
  • Khắc phục logic định dạng CSS trong bảng điều khiển Sources (Nguồn) đã gây ra nhiều dòng trống khi chỉnh sửa CSS. (1309588)
  • Giới hạn tuỳ chọn Mở rộng đệ quy của một đối tượng trong Bảng điều khiển ở mức tối đa là 100 để tùy chọn này không tiếp tục xảy ra vĩnh viễn đối với các đối tượng hình tròn. (1272450)

[Thử nghiệm] Sao chép các thay đổi CSS

Với thử nghiệm này, ngăn Kiểu sẽ làm nổi bật các thay đổi CSS của bạn bằng màu xanh lục. Bạn có thể di chuột qua các quy tắc đã thay đổi rồi nhấp vào nút sao chép mới bên cạnh quy tắc đó để sao chép.

Ngoài ra, bạn có thể sao chép tất cả các thay đổi về CSS trong các nội dung khai báo bằng cách nhấp chuột phải vào một quy tắc bất kỳ rồi chọn Sao chép tất cả các thay đổi về CSS.

Nút Sao chép mới cũng được thêm vào thẻ Thay đổi để giúp bạn dễ dàng theo dõi và sao chép các thay đổi về CSS!

Sao chép các thay đổi về CSS

Vấn đề với Chromium: 1268754

[Thử nghiệm] Chọn màu bên ngoài trình duyệt

Bật thử nghiệm này để chọn một màu bên ngoài trình duyệt bằng công cụ chọn màu. 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

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