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

Jecelyn Yeen

Công cụ gỡ lỗi hộp linh hoạt CSS mới

Công cụ cho nhà phát triển hiện có các công cụ gỡ lỗi hộp linh hoạt CSS chuyên dụng!

Công cụ gỡ lỗi hộp linh hoạt CSS

Khi một phần tử HTML trên trang của bạn được áp dụng display: flex hoặc display: inline-flex, bạn có thể thấy huy hiệu flex 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ủ linh hoạt trên trang.

Trong ngăn Styles (Kiểu), bạn có thể nhấp vào biểu tượng mới bên cạnh display: flex hoặc display: inline-flex để mở trình chỉnh sửa Flexbox. Trình chỉnh sửa hộp linh hoạt cung cấp một cách nhanh chóng để chỉnh sửa các thuộc tính hộp linh hoạt. Hãy thử ngay nào!

Ngoài ra, ngăn Layout (Bố cục) có phần Flexbox (Flexbox), cho thấy tất cả thành phần flexbox trên trang. Bạn có thể bật/tắt lớp phủ của từng phần tử.

Phần hộp linh hoạt trong ngăn Layout (Bố cục)

Vấn đề về Chromium: 1166710, 1175699

Lớp phủ mới Chỉ số quan trọng chính của trang web

Hiển thị trực quan và đo lường hiệu suất trang một cách hiệu quả hơn nhờ lớp phủ Core Web Vitals mới.

Chỉ số quan trọng chính của trang web là một sáng kiến của Google nhằm cung cấp hướng dẫn thống nhất về các tín hiệu chất lượng đóng vai trò thiết yếu trong việc mang lại trải nghiệm chất lượng cao cho người dùng trên web.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiển thị kết xuất), sau đó bật hộp đánh dấu Core Web Vitals.

Lớp phủ hiện hiển thị:

Nội dung lớn nhất hiển thị (LCP): đo lường hiệu suất tải. Để cung cấp trải nghiệm tốt cho người dùng, LCP phải xảy ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải lần đầu tiên.
Độ trễ đầu vào đầu tiên (FID): đo lường mức độ tương tác. Để mang lại trải nghiệm tốt cho người dùng, các trang nên có FID dưới 100 mili giây.
Điểm số tổng hợp về mức thay đổi bố cục (CLS): đo lường độ ổn định của hình ảnh. Để mang lại trải nghiệm tốt cho người dùng, các trang nên duy trì CLS ở mức dưới 0,1.

Lớp phủ Chỉ số quan trọng chính của trang web

Vấn đề về Chromium: 1152089

Cập nhật thẻ Vấn đề

Đã di chuyển số lượng vấn đề sang thanh trạng thái trên Console

Giờ đây, nút số lượng vấn đề mới sẽ được thêm vào thanh trạng thái trên Bảng điều khiển để cải thiện khả năng hiển thị các cảnh báo vấn đề. Thao tác này sẽ thay thế thông báo vấn đề trong Bảng điều khiển.

Số lượng vấn đề trên thanh trạng thái trên Console

Vấn đề về Chromium: 1140516

Báo cáo sự cố về Hoạt động đáng tin cậy trên web

Giờ đây, thẻ Vấn đề sẽ báo cáo các vấn đề về Hoạt động đáng tin cậy trên web. Mục đích của việc này là giúp nhà phát triển hiểu rõ và khắc phục các vấn đề về Hoạt động đáng tin cậy trên web trên trang web của họ, qua đó cải thiện chất lượng ứng dụng.

Mở một Hoạt động đáng tin cậy trên web. Sau đó, hãy mở thẻ Vấn đề bằng cách nhấp vào nút Số lượng vấn đề trong thanh trạng thái của Bảng điều khiển để xem các vấn đề. Hãy xem bài nói chuyện này của Andre để tìm hiểu thêm về cách tạo và triển khai Hoạt động đáng tin cậy trên web.

Vấn đề về Hoạt động đáng tin cậy trên web trong thẻ Vấn đề

Vấn đề về Chromium: 1147479

Định dạng chuỗi dưới dạng giá trị cố định chuỗi JavaScript (hợp lệ) trong Console

Hiện tại, Bảng điều khiển định dạng các chuỗi dưới dạng giá trị cố định dạng chuỗi JavaScript hợp lệ trong Bảng điều khiển. Trước đây, Bảng điều khiển sẽ không thoát khỏi dấu ngoặc kép khi in chuỗi.

Định dạng chuỗi dưới dạng giá trị cố định chuỗi JavaScript (hợp lệ)

Vấn đề về Chromium: 1178530

Ngăn Mã thông báo tin cậy mới trong bảng điều khiển Application (Ứng dụng)

Giờ đây, Công cụ cho nhà phát triển hiển thị tất cả Mã thông báo tin cậy có sẵn trong ngữ cảnh duyệt web hiện tại trong ngăn Trust Tokens (Mã thông báo tin cậy) mới trong bảng điều khiển Application (Ứng dụng).

Mã thông báo tin cậy là một API mới giúp chống lại hành vi gian lận và phân biệt bot với người thật mà không cần theo dõi thụ động. Tìm hiểu cách bắt đầu sử dụng Mã thông báo tin cậy.

Ngăn Mã thông báo tin cậy mới

Vấn đề về Chromium: 1126824

Mô phỏng tính năng đa phương tiện color-gamut của CSS

Truy vấn đa phương tiện color-gamut cho phép bạn kiểm thử khoảng màu gần đúng mà trình duyệt và thiết bị đầu ra hỗ trợ. Ví dụ: nếu truy vấn nội dung nghe nhìn color-gamut: p3 trùng khớp, thì có nghĩa là thiết bị của người dùng có hỗ trợ hệ màu Display-P3.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiển thị kết xuất), sau đó đặt trình đơn thả xuống Mô phỏng tính năng nội dung đa phương tiện CSS color-gamut.

Vấn đề về Chromium: 1073887

Cải thiện công cụ Ứng dụng web tiến bộ

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị thông báo cảnh báo chi tiết hơn về khả năng cài đặt Ứng dụng web tiến bộ (PWA) trong Bảng điều khiển, kèm theo đường liên kết đến tài liệu.

Cảnh báo về khả năng cài đặt PWA

Giờ đây, ngăn Manifest (Tệp kê khai) sẽ hiển thị một thông báo cảnh báo nếu nội dung mô tả của tệp kê khai vượt quá 324 ký tự.

Cảnh báo cắt bớt nội dung mô tả PWA

Ngoài ra, giờ đây, ngăn Manifest (Tệp kê khai) sẽ hiển thị một thông báo cảnh báo nếu ảnh chụp màn hình của PWA không phù hợp với yêu cầu. Tìm hiểu thêm về thuộc tính ảnh chụp màn hình của PWA và các yêu cầu của thuộc tính này tại đây.

Cảnh báo về ảnh chụp màn hình của ứng dụng web tiến bộ (PWA)

Vấn đề về Chromium: 1146450, 1169689, 965802

Cột `Remote Address Space` mới trong bảng điều khiển Mạng

Sử dụng cột Remote Address Space mới trong bảng điều khiển Mạng để xem không gian địa chỉ IP mạng của từng tài nguyên mạng.

Cột 'Không gian địa chỉ từ xa' mới

Vấn đề về Chromium: 1128885

Điểm cải tiến về hiệu suất

Hiệu suất tải trang khi Công cụ cho nhà phát triển đang mở hiện đã được cải thiện. Trong một số trường hợp đặc biệt, chúng tôi nhận thấy hiệu suất tăng gấp 10 lần.

Công cụ cho nhà phát triển thu thập dấu vết ngăn xếp và đính kèm các dấu vết đó vào thông báo trên bảng điều khiển hoặc các tác vụ không đồng bộ để nhà phát triển sử dụng sau này trong trường hợp có vấn đề. Vì việc thu thập này phải diễn ra một cách đồng bộ trong công cụ của trình duyệt, nên việc thu thập dấu vết ngăn xếp chậm có thể làm chậm đáng kể trang khi Công cụ cho nhà phát triển đang mở. Chúng tôi đã giảm đáng kể chi phí thu thập dấu vết ngăn xếp.

Hãy chú ý theo dõi bài đăng chi tiết hơn trên blog về kỹ thuật có giải thích về cách triển khai.

Vấn đề về Chromium: 1069425, 1077657

Hiển thị các tính năng được phép/không được phép trong chế độ xem chi tiết của Khung

Giờ đây, chế độ xem chi tiết khung hình sẽ hiển thị danh sách các tính năng của trình duyệt được phép và không được phép do Chính sách về quyền kiểm soát.

Chính sách về quyền là một API nền tảng web giúp một trang web có thể cho phép hoặc chặn việc sử dụng các tính năng của trình duyệt trong khung riêng hoặc trong các iframe mà trang web đó nhúng.

Các tính năng được phép/không được phép dựa trên Chính sách về quyền

Vấn đề về Chromium: 1158827

Cột `SameParty` mới trong ngăn Cookie

Lúc này, ngăn Cookie trong bảng điều khiển Application (Ứng dụng) hiển thị thuộc tính SameParty của các cookie. Thuộc tính SameParty là một thuộc tính boolean mới cho biết liệu có cần đưa cookie vào các yêu cầu đến nguồn gốc của cùng một Nhóm bên thứ nhất hay không.

Cột cùng nhóm

Vấn đề về Chromium: 1161427

Ngừng sử dụng tính năng hỗ trợ không chuẩn cho `fn.displayName`

Ngừng hỗ trợ cho fn.displayName không chuẩn. Sử dụng fn.name thay thế.

Ví dụ về cách sử dụng displayName

Theo truyền thống, Chrome đã hỗ trợ thuộc tính fn.displayName không chuẩn như một cách để nhà phát triển kiểm soát tên gỡ lỗi cho các hàm xuất hiện trong error.stack và trong dấu vết ngăn xếp của Công cụ cho nhà phát triển. Trong ví dụ trên, Ngăn xếp lệnh gọi trước đó sẽ hiển thị noLongerSupport.

Thay thế fn.displayName bằng fn.name tiêu chuẩn có thể định cấu hình (thông qua Object.defineProperty) trong ECMAScript 2015 để thay thế thuộc tính fn.displayName không chuẩn.

fn.displayName hỗ trợ không đáng tin cậy và không nhất quán trên các công cụ trình duyệt. Tính năng này làm chậm quá trình thu thập dấu vết ngăn xếp, một chi phí mà nhà phát triển luôn phải trả bất kể họ có thực sự sử dụng fn.displayName hay không.

Ví dụ về cách sử dụng tên

Vấn đề về Chromium: 1177685

Ngừng sử dụng `Don't show Chrome Data Saver warning` trong trình đơn Cài đặt

Chế độ cài đặt Don't show Chrome Data Saver warning bị xoá vì Trình tiết kiệm dữ liệu Chrome đã không còn được dùng.

Không dùng chế độ cài đặt "Không hiển thị cảnh báo của Trình tiết kiệm dữ liệu trên Chrome"

Vấn đề về Chromium: 1056922

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

Tự động báo cáo vấn đề về độ tương phản thấp trong thẻ Vấn đề

Công cụ cho nhà phát triển đã tự động thêm tính năng hỗ trợ thử nghiệm để báo cáo các vấn đề về độ tương phản trong thẻ Vấn đề.

Văn bản có độ tương phản thấp là vấn đề về khả năng tiếp cận có thể phát hiện tự động phổ biến nhất trên web. Việc hiển thị các vấn đề này trong thẻ Vấn đề sẽ giúp nhà phát triển phát hiện những vấn đề này dễ dàng hơn.

Mở một trang có vấn đề về độ tương phản thấp (ví dụ: bản minh hoạ này). Sau đó, hãy mở thẻ Vấn đề bằng cách nhấp vào nút Số lượng vấn đề trong thanh trạng thái của Bảng điều khiển để xem các vấn đề.

Tự động báo cáo vấn đề về độ tương phản thấp

Vấn đề về Chromium: 1155460

Chế độ xem dạng cây hỗ trợ tiếp cận đầy đủ trong bảng điều khiển Phần tử

Giờ đây, bạn có thể bật/tắt để xem một trang ở chế độ xem dạng cây hỗ trợ tiếp cận đầy đủ mới và đã cải tiến.

Ngăn hỗ trợ tiếp cận hiện tại cung cấp màn hình giới hạn các nút của ngăn này, chỉ hiển thị chuỗi đối tượng cấp trên trực tiếp từ nút gốc đến nút được kiểm tra. Chế độ xem dạng cây hỗ trợ tiếp cận mới có mục đích cải thiện điều đó và làm cho cây hỗ trợ tiếp cận trở nên dễ khám phá, hữu ích và dễ sử dụng hơn cho nhà phát triển.

Sau khi bật thử nghiệm, một nút mới sẽ xuất hiện trong bảng điều khiển Phần tử, hãy nhấp để chuyển đổi giữa cây DOM hiện có và cây hỗ trợ tiếp cận đầy đủ.

Xin lưu ý rằng đây là một thử nghiệm đang ở giai đoạn đầu. Ch��ng tôi d�� đ��nh sẽ cải thiện và mở rộng chức năng này theo thời gian.

Chế độ xem dạng cây hỗ trợ tiếp cận đầy đủ

Vấn đề về Chromium: 887173

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