Trang này được dịch bởi Cloud Translation API.

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 Lưới CSS mới

Công cụ cho nhà phát triển hiện hỗ trợ tốt hơn tính năng 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 Layout (Bố cục) mới có phần Grid (Lưới) cung cấp cho bạn một số tuỳ chọn để xem lưới.

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

Vấn đề với Chromium: 1047356

Thẻ WebAuthn

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.

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

Thẻ WebAuthn

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

Với thẻ WebAuthn mới, các nhà phát triển web giờ đây có thể mô phỏng các trình xác thực này, tuỳ chỉnh khả 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. Điều này giúp quá trình gỡ lỗi trở nên dễ dàng hơn nhiều.

Hãy tham khảo 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ới 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ợ các công cụ di chuyển 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 hai công cụ bất kỳ cùng một lúc.

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 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 từ dưới 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 đầu.

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

Vấn đề với Chromium: 1075732

Cập nhật bảng điều khiển Phần tử

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

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

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

Vấn đề với Chromium: 1073899

Nhóm các tài sản 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 Computed (Tính toán).

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

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

Nhóm các tài sản CSS

Sự cố với 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 lượt 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 tải trước hay chưa.
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. Quá 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 và phổ biến như moment.js.

Vấn đề với Chromium: 772558

`performance.mark()` sự kiện trong mục Thời gian

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

Sự kiện Performance.mark

Các bộ lọc `resource-type` và `url` mới trong bảng điều khiển Mạng

Sử dụng từ khoá mới resource-type và url trong Bảng điều khiển mạng để lọ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

Xem phần lọc các yêu cầu theo thuộc tính để khám phá thêm các từ khoá đặc biệt như resource-type và url.

Các sự cố với Chromium: 1121141, 1104188

Cập nhật chế độ xem chi tiết khung

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

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

API Báo cáo xác định tiêu đề HTTP mới, Report-To, giúp nhà phát triển web chỉ định đ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 đến đ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 cách thiết lập để trang web "bị tách biệt nhiều nguồn gốc".

Vấn đề với 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 nhãn report-only cho COEP và COOP được đặt ở chế độ report-only.

nhãn chỉ báo cáo

Xem video này để tìm hiểu về cách ngăn chặn việc rò rỉ thông tin và bật COOP và COEP trên trang web của bạn.

Vấn đề với Chromium: 1051466

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

Ngừng sử dụng Settings trong trình đơn Công cụ khác. Thay vào đó, hãy mở phần Settings (Cài đặt) từ bảng điều khiển chính.

Chế độ cài đặt trong bảng điều khiển chính

Vấn đề với 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 của CSS

Giờ đây, bảng điều khiển Tổng quan về CSS sẽ hiển thị danh sách các 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ó một 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 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 Phần tử. Công cụ cho nhà phát triển cung cấp đề xuất màu tự động để giúp bạn sửa văn bản có độ tương phản thấp.

Vấn đề với 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 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ả cá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ới Chromium: 174309

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