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 điều khiển 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 của trang web.

Mở bảng điều khiển rồi bắt đầu ghi một bản ghi mới dựa trên trường hợp sử dụng của bạn. Ví dụ: hãy đo lường tốc độ 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 quay xong, bạn sẽ nhận được thông tin chi tiết về hiệu suất trên 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 kết xuất, thay đổi bố cục) để tìm hiểu vấn đề và các giải pháp tiềm năng.

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

Đây là một tính năng xem trước giúp các nhà phát triển web (đặc biệt là những người không phải là chuyên gia 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à rất mong nhận được ý kiến phản hồi của bạn để cải thiện thêm.

Vấn đề về Chromium: 1270700

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

Giờ đây, bạ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-scheme) bằng các lối tắt mới trong ngăn Styles (Kiểu).

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ẻ Rendering (Hiển thị).

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

Vấn đề về Chromium: 1314299

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

Công cụ dành 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 điều khiển Mạng.

Ví dụ: ảnh chụp màn hình đầu tiên cho thấy một trang chứa nội dung hỗn hợp. Trang tải qua kết nối HTTPS an toàn, nhưng tệp 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 của bảng định kiểu. Tuy nhiên, khi bạn mở trang thông qua thẻ Xem trước trong bảng điều khiển Mạng, trước đó, tệp kiểu đã không bị chặn (do đó, nền đã chuyển sang màu đỏ). Giờ đây, URL này đã bị chặn như bạn mong đợi (ả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ề Chromium: 833147

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

Trình gỡ lỗi hiện sẽ chấm dứt quá trình thực thi tập lệnh khi tải lại tại điểm ngắt.

Ví dụ: trước đây, tập lệnh đã rơi 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ạ React này. Bảng điều khiển Sources (Nguồn) bị hỏng do vòng lặp vô hạn.

Việc tiếp tục thực thi JavaScript đang gây ra nhiều rắc rối cho 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 cho phù hợp 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

Vấn đề về Chromium: 1014415, 1004038, 1112863, 1134899

Nội dung cập nhật về Console

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 Bảng điều khiển sẽ tạo ra các sự kiện lỗi thích hợp kích hoạt trình xử lý window.onerror và được gửi dưới dạng 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ề Chromium: 1295750

Gửi biểu thức trực tiếp bằng Enter

Sau khi nhập xong một biểu thức trực tiếp, bạn có thể nhấp vào Enter để xác nhận biểu thức đó. Trước đây, khi nhấn Enter, bạn sẽ 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.

Gửi biểu thức trực tiếp bằng Enter

Vấn đề về Chromium: 1260744

Huỷ ghi lại quy trình của người dùng ở đầu

Bạn có thể huỷ quá trình ghi trong khi 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 quy trình của người dùng ở đầu

Vấn đề về Chromium: 1257499

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

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

Như đã đề cập trong quy cách, khi nhiều kiểu xung đột, kiểu thác nước sẽ xác định kiểu chiến thắng. Tính năng mới này giúp bạn hiểu được 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ập làm nổi bật được kế thừa trong ngăn Kiểu

Vấn đề về Chromium: 1024156

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

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

  • Ngăn Properties (Thuộc tính) hiện hiển thị các thuộc tính truy cập có giá trị theo mặc định. Trước đây, tính năng này đã bị ẩn do nhầm lẫn. (1309087)
  • Ngăn Styles (Kiểu) hiện hiển thị đúng cách các quy tắc @support bị ghi đè dưới 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 Console ở mức tối đa là 100 để không tiếp tục mãi đối với các đối tượng hình tròn. (1272450)

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

Với thử nghiệm này, ngăn Styles (Kiểu) sẽ đánh dấu các thay đổi về CSS 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 để sao chép quy tắc đó.

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

Một 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ề 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à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ột màu trong trình duyệt.

Trong ngăn 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.

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

Vấn đề về Chromium: 1245191

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.