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

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 cho phần tử đó, bạn có thể thấy huy hiệu grid bên cạnh trong bảng Phần tử. Nhấp vào huy hiệu để bật/tắt màn hình của một lớp phủ lưới trên trang.

Ngăn Layout (Bố cục) mới có một phần Grid (Lưới) cung cấp cho bạn nhiều lựa chọn để xem lưới.

Hãy xem tài liệu này để 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 giao thức WebAuthn mới .

Chọn Lựa 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 nào. 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, 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 các chức năng khác nhau và kiểm tra trạng thái của chúng mà không cần đến trình xác thực thực. Điều này khiến thì quá trình gỡ lỗi sẽ 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ông cụ giữa bảng điều khiển trên cùng và bảng dưới cùng

Công cụ cho nhà phát triển hiện hỗ trợ di chuyển 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 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ể chỉnh sửa nhấp vào bảng Nguồn rồi chọn Chuyển xuống dưới cùng để di chuyển bảng xuống dưới cùng.

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

Tương tự, bạn có thể di chuyển thẻ dưới cùng bất kỳ 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 Chuyển tới đầu trang.

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

Vấn đề về Chromium: 1075732

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

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

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

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 Đã 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 điều hướng trong ngăn Đã tính toán hơn (ít hơn cuộn) và tập trung chọn lọc vào một tập hợp các thuộc tính có liên quan để kiểm tra CSS.

Trong 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 CSS các thuộc tính.

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 đang chạy Lighthouse 6.4. Hãy xem ghi chú phát hành để biết danh sách các thay đổi.

Ngọn hải đăng

Các hoạt động kiểm tra mới trong Lighthouse 6.4:

Tải trước phông chữ. Xác thực xem đã tải trước tất cả phông chữ sử dụng font-display: optional 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. Thư viện JavaScript lớn có thể dẫn đến hiệu suất. Kết quả kiểm tra này đề xuất các giải pháp thay thế ít tốn kém hơn so với các thư viện JavaScript phổ biến và lớn như moment.js.

Vấn đề về Chromium: 772558

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

Giờ đây, phần Thời gian của bản ghi hiệu suất sẽ đá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 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 về 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

Tham khảo phần yêu cầu lọc theo cơ sở lưu trú để 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 chi tiết khung

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

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

API báo cáo xác định tiêu đề HTTP mới, Report-To, cung cấp cho các nhà phát triển web cách chỉ định đ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 đến thiết bị đầu cuối

Hãy đọc bài viết này để tìm hiểu thêm về cách bật tính năng COEP và COOP cũng như cách tạo trang web "được tách riêng trên nhiều nguồn gốc".

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

Xem video này để tìm hiểu cách ngăn chặn việc rò rỉ thông tin cũng như bật tính năng 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. Mở phần Cài đặt từ bảng điều khiển chính thay thế.

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 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ó vấn đề về độ tương phản màu thấp. Nhấp vào vấn đề, bạn có thể hãy xem danh sách các yếu tố có 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 dịch vụ tự động gợi ý 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 của mình trong Công cụ cho nhà phát triển.

Chuyển đến Cài đặt > Lối tắt, di chuột vào 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, nhấp vào Khôi phục phím tắt mặc định.

Vấn đề về Chromium: 174309

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