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

Jecelyn Yeen

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

Công cụ cho nhà phát triển 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ó display: grid hoặc display: inline-grid được áp dụng, bạn có thể thấy huy hiệu grid bên cạnh phần tử đó trong bảng điều khiển Elements (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 Layout (Bố cục) mới có một mục Grid (Lưới) cung cấp cho bạn một số lựa 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 có tính năng hỗ trợ gỡ lỗi WebAuthn gốc. Nhà phát triển cần trình xác thực thực để kiểm thử ứng dụng web của họ bằng Web Authentication API.

Với thẻ WebAuthn mới, giờ đây, nhà phát triển web 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 chúng mà không cần bất kỳ trình xác thực thực nào. Điều này giúp quá trình 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

Công cụ cho nhà phát triển hiện hỗ trợ di chuyển các công cụ trong Công cụ cho nhà phát triển 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 bảng điều khiển Phần tử và Nguồn cùng một lúc, bạn có thể nhấp chuột phải vào bảng điều khiển Nguồn rồi chọn Di 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 mọi thẻ ở dưới cùng lên trên cùng bằng cách nhấp chuột phải vào một thẻ rồi chọn Di chuyển lên trên cùng.

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

Vấn đề về Chromium: 1075732

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

Xem ngăn thanh bên Kiểu đã tính toán trong ngăn 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 này để bật/tắt.

Ngăn thanh bên được tính toán

Vấn đề về Chromium: 1073899

Nhóm các thuộc tính CSS trong ngăn Đã 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 Đã 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 (giảm thao tác cuộn) và tập trung chọn lọc vào một nhóm các thuộc tính có liên quan để kiểm tra CSS.

Trên bảng Phần tử, hãy chọn một phần tử. Đánh dấu vào hộp Group (Nhóm) để nhóm/huỷ nhóm các thuộc tính CSS.

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

Các vấn đề về Chromium: 1096230, 1084673, 1106251

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

Bảng 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 bài 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ụng font-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 lựa chọn 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 Timings (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-type và url mới trong bảng điều khiển Mạng

Sử dụng các từ khoá resource-type và url 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-type và url.

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

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

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

Giờ đây, bạn có thể xem điểm cuối Cross-Origin Embedder Policy (COEP) và Cross-Origin Opener Policy (COOP)reporting to trong phần Bảo mật và cách ly.

Reporting API 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 đến.

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, đồng thời giúp trang web của bạn "được cách ly trên nhiều nguồn".

Vấn đề về Chromium: 1051466

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

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị nhãn report-only cho COEP và COOP được đặt ở 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 cũng như COEP trong trang web của bạn.

Vấn đề về Chromium: 1051466

Ngừng cung cấp Settings trong trình đơn Công cụ khác

Biểu tượng Settings trong trình đơn Công cụ khác không còn được dùng nữa. Mở phần Cài đặt trong bảng điều khiển chính.

Chế độ 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 đề đó.

Các 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 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 các phím tắt cho những lệnh mà bạn yêu thích trong Công cụ cho nhà phát triển.

Chuyển đến phần Cài đặt > Phím tắt, di chuột lên 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.