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 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 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ả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 xong, bạn sẽ thấy 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 Hiển thị, thay đổi bố cục) để tìm hiểu vấn đề và các cách khắc phục có thể áp dụng.

Chuyển đến tài liệu về bảng 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à 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ề Chromium: 1270700

Các 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 của CSS prefers-color-scheme) bằng các phím tắt mới trong ngăn 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ẻ Hiển thị.

Các 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ẻ Network Preview (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 đ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 một kết nối HTTPS bảo mật, nhưng biểu định kiểu tải qua một 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 thông qua thẻ Xem trước trong bảng điều khiển Mạng, biểu định kiểu không bị chặn trước đó (do đó nền chuyển sang màu đỏ). Thao tác này hiện đã bị chặn như bạn mong đợi (ảnh chụp màn hình thứ hai).

Tăng cường bảo mật trên thẻ Network Preview (Xem trước mạng)

Vấn đề về Chromium: 833147

Cải thiện quá trình tải lại tại điểm ngắt

Trình gỡ lỗi hiện 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ụ: tập lệnh trước đó đã rơi vào một vòng lặp vô tận khi đặt 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 Sources (Nguồn) bị lỗi do vòng lặp vô tận.

Việc tiếp tục thực thi JavaScript gây 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 sẽ đ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 quá trình tải lại tại điểm ngắt

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

Bản cập nhật 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 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

Xác nhận 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, thao tác nhấn Enter sẽ 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ề Chromium: 1260744

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

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

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

Vấn đề về Chromium: 1257499

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

Xem các phần tử giả 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, những quy tắc này không xuất hiện.

Như đã đề cập trong thông số kỹ thuật, khi nhiều kiểu xung đột với nhau, kiểu 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 nắm được tính kế thừa và mức độ ưu tiên của các quy tắc.

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

Vấn đề về Chromium: 1024156

Nội dung nổi bật khác

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

  • Giờ đây, ngăn Properties (Thuộc tính) sẽ hiển thị các thuộc tính của trình truy cập có giá trị theo mặc định. Trước đó, tệp này đã bị ẩn do nhầm lẫn. (1309087)
  • Giờ đây, ngăn Kiểu hiển thị đúng các quy tắc @support bị ghi đè dưới dạng dấu gạch ngang chữ. Trước đây, các quy tắc không bị gạch ngang. (1298025)
  • Sửa lỗi 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 lên tối đa 100 để tuỳ chọn này không tiếp tục diễn ra đố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 Kiểu đánh dấu 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ả thay đổi CSS trong nội dung khai báo bằng cách nhấp chuột phải vào quy tắc bất kỳ rồi chọn Copy all CSS changes (Sao chép tất cả thay đổi về CSS).

Chúng tôi cũng thêm nút Copy (Sao chép) mới vào thẻ Changes để 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à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ở 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

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ố 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.