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

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 á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ị của 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 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 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 hiện 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 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 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ửNguồn cùng một lúc, bạn có thể nhấp chuột phải vào bảng Nguồn rồi chọn Chuyển xuống dưới cùng để di chuyển bảng 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 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 lên đầu.

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ử

Xem ngăn thanh bên Đã 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.

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 này để 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 di chuyển trong ngăn Computed (Đã tính toán) (ít cuộn hơ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 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 đ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 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. Các thư viện JavaScript lớn có thể làm giảm hiệu suất. Quy trình 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 lớn và phổ biế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-typeurl mới trong bảng điều khiển Mạng

Sử dụng các từ khoá resource-typeurl 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

Hãy xem phần yêu cầu lọc theo cơ sở lưu trú để khám phá các từ khoá đặc biệt khác như resource-typeurl.

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 điểm cuối reporting to 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) trong phần Bảo mật và cách ly.

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 đ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 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 thiết lập tính năng "phân tách nhiều nguồn gốc" cho trang web của bạ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 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 việc rò rỉ thông tin cũng như bật tính năng COOP và COEP trên 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 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ề 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ể xem danh sách các thành phần 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 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 phần Cài đặt > Phím 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ả 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ề 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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59