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

Các công cụ gỡ lỗi mới cho CSS Grid

DevTools hiện hỗ trợ tốt hơn cho việc gỡ lỗi lưới CSS!

Gỡ lỗi lưới CSS

Khi một phần tử HTML trên trang của bạn được áp dụng display: grid hoặc display: inline-grid, bạn có thể thấy huy hiệu grid bên cạnh phần tử đó trong bảng điều khiển Phần tử. Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ lưới trên trang.

Ngăn Bố cục mới có mục Lưới cung cấp cho bạn một số tuỳ chọn để xem lưới.

Hãy xem tài liệu để tìm hiểu thêm.

Vấn đề về Chromium: 1047356

Thẻ WebAuthn mới

Giờ đây, bạn có thể mô phỏng trình xác thực và gỡ lỗi API xác thực web bằng thẻ WebAuthn mới.

Chọn Tuỳ chọn khác > Công cụ khác > WebAuthn để mở thẻ WebAuthn.

Thẻ WebAuthn

Trước thẻ WebAuthn mới, Chrome không hỗ trợ gỡ lỗi WebAuthn gốc. Nhà phát triển cần có trình xác thực thực để kiểm thử ứng dụng web bằng API Xác thực web.

Với thẻ WebAuthn mới, nhà phát triển web hiện có thể mô phỏng các trình xác thực này, tuỳ chỉnh các chức năng và kiểm tra trạng thái của trình xác thực mà không cần bất kỳ trình xác thực thực nào. Điều này giúp trải nghiệm gỡ lỗi trở nên dễ dàng hơn nhiều.

Hãy xem tài liệu của chúng tôi để tìm hiểu thêm về tính năng WebAuthn.

Vấn đề về Chromium: 1034663

Di chuyển các công cụ giữa bảng điều khiển trên cùng và dưới cùng

DevTools hiện hỗ trợ việc di chuyển các công cụ trong DevTools giữa bảng điều khiển trên cùng và dưới cùng. Bằng cách này, bạn có thể xem cùng lúc hai công cụ bất kỳ.

Ví dụ: nếu muốn xem cùng lúc bảng điều khiển Elements (Thành phần) và Sources (Nguồn), bạn có thể nhấp chuột phải vào bảng điều khiển Sources (Nguồn) rồi chọn Move to bottom (Chuyển xuống dưới cùng) để di chuyển bảng điều khiển này xuống dưới cùng.

Chuyển xuống dưới cùng

Tương tự, bạn có thể di chuyển bất kỳ thẻ nào ở dưới cùng lên đầu bằng cách nhấp chuột phải vào thẻ đó rồi chọn Di chuyển lên đầu.

Chuyển lên trên cùng

Vấn đề về Chromium: 1075732

Nội dung cập nhật về bảng điều khiển Phần tử

Xem ngăn thanh bên Computed (Đã tính toán) trong ngăn Styles (Kiểu)

Giờ đây, bạn có thể bật/tắt ngăn Thanh bên đã tính toán trong ngăn Kiểu.

Theo mặc định, ngăn Thanh bên đã tính toán trong ngăn Kiểu sẽ được thu gọn. Nhấp vào nút để bật/tắt tính năng này.

Ngăn thanh bên đã tính toán

Vấn đề về Chromium: 1073899

Nhóm các thuộc tính CSS trong ngăn Computed (Đã tính toán)

Giờ đây, bạn có thể nhóm các thuộc tính CSS theo danh mục trong ngăn Computed (Đã tính toán).

Với tính năng nhóm mới này, bạn sẽ dễ dàng di chuyển trong ngăn Đã tính toán (ít phải cuộn hơn) và tập trung có chọn lọc vào một nhóm thuộc tính có liên quan để kiểm tra CSS.

Trên bảng điều khiển Elements (Phần tử), hãy chọn một phần tử. Chuyển đổi hộp đánh dấu Nhóm để nhóm/huỷ nhóm các thuộc tính CSS.

Nhóm các thuộc tính CSS

Vấn đề về Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse hiện đang chạy Lighthouse 6.4. Hãy xem ghi chú phát hành để biết danh sách đầy đủ các thay đổi.

Ngọn hải đăng

Các quy trình kiểm tra mới trong Lighthouse 6.4:

  • Tải trước phông chữ. Xác thực xem tất cả phông chữ sử dụngfont-display: optional có được tải trước hay không.
  • Bản đồ nguồn hợp lệ. Kiểm tra xem một trang có bản đồ nguồn hợp lệ cho JavaScript lớn của bên thứ nhất hay không.
  • [Thử nghiệm] Thư viện JavaScript lớn. Các thư viện JavaScript lớn có thể dẫn đến hiệu suất kém. Quy trình kiểm tra này đề xuất các giải pháp thay thế rẻ hơn cho các thư viện JavaScript lớn, phổ biến như moment.js.

Vấn đề về Chromium: 772558

Sự kiện performance.mark() trong phần Thời gian

Phần Thời gian của bản ghi Hiệu suất hiện đánh dấu các sự kiện performance.mark().

Sự kiện Performance.mark

Bộ lọc resource-typeurl mới trong bảng điều khiển Mạng

Sử dụng từ khoá resource-typeurl mới trong Bảng điều khiển mạng để lọc các yêu cầu mạng.

Ví dụ: sử dụng resource-type:image để tập trung vào các yêu cầu mạng là hình ảnh.

bộ lọc loại tài nguyên

Hãy xem phần lọc yêu cầu theo tài sản để khám phá thêm các từ khoá đặc biệt như resource-typeurl.

Vấn đề về Chromium: 1121141, 1104188

Cập nhật chế độ xem thông tin chi tiết về khung

Hiển thị điểm cuối reporting to của COEP và COOP

Giờ đây, bạn có thể xem điểm cuối reporting to của Chính sách về trình nhúng nhiều nguồn gốc (COEP) và Chính sách về trình mở nhiều nguồn gốc (COOP) trong phần Bảo mật và tách biệt.

API Báo cáo xác định một tiêu đề HTTP mới, Report-To, giúp nhà phát triển web chỉ định các điểm cuối của máy chủ để trình duyệt gửi cảnh báo và lỗi.

báo cáo cho điểm cuối

Hãy đọc bài viết này để tìm hiểu thêm về cách bật COEP và COOP cũng như cách làm cho trang web của bạn "được tách biệt giữa các nguồn gốc".

Vấn đề về Chromium: 1051466

Hiển thị chế độ report-only COEP và COOP

Giờ đây, DevTools sẽ hiển thị nhãn report-only cho COEP và COOP được đặt thành chế độ report-only.

nhãn chỉ báo cáo

Hãy xem video này để tìm hiểu cách ngăn chặn rò rỉ thông tin và bật COOP và COEP trong trang web của bạn.

Vấn đề về Chromium: 1051466

Ngừng sử dụng Settings trong trình đơn Công cụ khác

Settings trong trình đơn Công cụ khác không còn được dùng nữa. Thay vào đó, hãy mở phần Cài đặt từ bảng điều khiển chính.

Cài đặt trong bảng điều khiển chính

Vấn đề về Chromium: 1121312

Các tính năng thử nghiệm

Xem và khắc phục các vấn đề về độ tương phản màu trong bảng điều khiển Tổng quan về CSS

Giờ đây, bảng điều khiển Tổng quan về CSS sẽ hiển thị danh sách văn bản có độ tương phản màu thấp trên trang của bạn.

Trong ví dụ này, trang minh hoạ có vấn đề về độ tương phản màu thấp. Nhấp vào vấn đề, bạn có thể xem danh sách các phần tử gặp phải vấn đề đó.

Vấn đề về độ tương phản màu thấp

Nhấp vào một phần tử trong danh sách để mở phần tử đó trong bảng điều khiển Elements (Phần tử). DevTools cung cấp tính năng tự động đề xuất màu để giúp bạn khắc phục văn bản có độ tương phản thấp.

Vấn đề về Chromium: 1120316

Tuỳ chỉnh phím tắt trong Công cụ cho nhà phát triển

Giờ đây, bạn có thể tuỳ chỉnh phím tắt cho các lệnh yêu thích trong DevTools.

Chuyển đến phần Cài đặt > Phím tắt, di chuột qua một lệnh rồi nhấp vào nút Chỉnh sửa (biểu tượng bút) để tuỳ chỉnh phím tắt.

Tuỳ chỉnh phím tắt

Để đặt lại tất cả phím tắt, hãy nhấp vào Khôi phục phím tắt mặc định.

Vấn đề về Chromium: 174309

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.