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

Kayce Basques

Khắc phục các vấn đề về trang web thông qua thẻ Vấn đề mới

Thẻ Vấn đề mới trong Ngăn kéo nhằm giúp giảm bớt tình trạng thông báo mệt mỏi và lộn xộn của Bảng điều khiển. Hiện tại, Console là trung tâm dành cho các nhà phát triển trang web, thư viện, khung và chính Chrome để ghi nhật ký, cảnh báo và lỗi. Thẻ Vấn đề hiển thị các cảnh báo từ trình duyệt theo cách có cấu trúc, tổng hợp và hữu ích, các đường liên kết đến các tài nguyên bị ảnh hưởng trong Công cụ cho nhà phát triển, đồng thời cung cấp hướng dẫn về cách khắc phục vấn đề. Theo thời gian, ngày càng nhiều cảnh báo của Chrome sẽ xuất hiện trong thẻ Vấn đề thay vì trên Bảng điều khiển. Điều này sẽ giúp giảm tình trạng lộn xộn của Bảng điều khiển.

Hãy tham khảo bài viết Tìm và khắc phục sự cố với thẻ Vấn đề trong Công cụ của Chrome cho nhà phát triển để bắt đầu.

Thẻ Vấn đề.

Lỗi Chromium: #1068116

Giờ đây, chú thích về Chế độ kiểm tra cho biết phần tử có tên và vai trò dễ tiếp cận và có thể làm tâm điểm bằng bàn phím hay không.

Chú thích về Chế độ kiểm tra có thông tin về khả năng hỗ trợ tiếp cận.

Lỗi Chromium: #1040025

Thông tin cập nhật về bảng điều khiển hiệu suất

Xem thông tin về Tổng thời gian chặn (TBT) ở chân trang

Sau khi ghi lại hiệu suất tải, bảng Hiệu suất hiện sẽ hiển thị thông tin về Tổng thời gian chặn (TBT) ở chân trang. TBT là chỉ số hiệu suất tải giúp định lượng khoảng thời gian cần thiết để sử dụng một trang. Về cơ bản, công cụ này đo lường khoảng thời gian một trang xuất hiện để sử dụng được (vì nội dung của trang đã được hiển thị lên màn hình) nhưng không thực sự sử dụng được vì JavaScript đang chặn luồng chính và do đó trang không thể phản hồi với hoạt động đầu vào của người dùng. TBT là chỉ số chính trong phòng thí nghiệm để ước tính Độ trễ đầu vào đầu tiên. Đây là một trong những Chỉ số quan trọng chính của trang web mới của Google.

Để lấy thông tin về Tổng thời gian chặn, không sử dụng quy trình công việc Tải lại trang để ghi lại hiệu suất tải trang. Thay vào đó, hãy nhấp vào biểu tượng Ghi lại Ghi âm , tải lại trang theo cách thủ công, đợi trang tải xong rồi dừng ghi. Nếu bạn thấy Total Blocking Time: Unavailable, điều đó có nghĩa là Công cụ cho nhà phát triển không nhận được thông tin cần thiết từ dữ liệu lập hồ sơ nội bộ của Chrome.

Thông tin về Tổng thời gian chặn ở chân trang của bản ghi bảng Hiệu suất.

Lỗi Chromium: #1054381

Sự kiện Layout Shift trong phần Trải nghiệm mới

Phần Trải nghiệm mới trong bảng điều khiển Hiệu suất có thể giúp bạn phát hiện các thay đổi về bố cục. Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một chỉ số có thể giúp bạn định lượng sự bất ổn định về hình ảnh không mong muốn. Chỉ số này cũng là một trong những chỉ số Chỉ số quan trọng chính của trang web mới của Google.

Nhấp vào một sự kiện Layout Shift để xem thông tin chi tiết về thay đổi bố cục trong thẻ Tóm tắt. Di chuột qua các trường Đã chuyển từ và Đã chuyển tới để hình dung vị trí diễn ra sự thay đổi bố cục.

Thông tin chi tiết về việc thay đổi bố cục.

Các thuật ngữ chính xác hơn về lời hứa trong Console

Khi ghi nhật ký Promise, Bảng điều khiển dùng để mô tả không chính xác trạng thái của Promise là resolved:

Ví dụ về Play Console sử dụng thuật ngữ "đã giải quyết" cũ.

Giờ đây, Play Console sử dụng thuật ngữ fulfilled, phù hợp với thông số kỹ thuật của Promise:

Một ví dụ về Play Console sử dụng thuật ngữ "đã thực hiện" mới.

Lỗi V8: #6751

Cập nhật ngăn Kiểu

Hỗ trợ cho từ khoá `revert`

Giao diện người dùng tự động hoàn thành của ngăn Kiểu hiện phát hiện từ khoá CSS revert. Từ khoá này sẽ hoàn nguyên giá trị phân tầng của một thuộc tính về giá trị lẽ ra nếu không có thay đổi nào đối với kiểu của phần tử.

Đặt giá trị của một thuộc tính thành huỷ bỏ.

Lỗi Chromium: #1075437

Bản xem trước hình ảnh

Di chuột qua giá trị background-image trong ngăn Kiểu để xem trước hình ảnh trong chú thích.

Di chuột qua một giá trị hình nền.

Lỗi Chromium: #1040019

Công cụ chọn màu hiện sử dụng ký hiệu màu hàm được phân tách bằng dấu cách

Mô-đun màu CSS cấp 4 chỉ định rằng các hàm màu như rgb() cần hỗ trợ các đối số được phân tách bằng dấu cách. Ví dụ: rgb(0, 0, 0) tương đương với rgb(0 0 0).

Khi chọn màu bằng Công cụ chọn màu hoặc thay thế giữa các cách biểu diễn màu trong ngăn Kiểu bằng cách giữ phím Shift, sau đó nhấp vào giá trị màu, bạn sẽ thấy cú pháp đối số được phân tách bằng dấu cách.

Sử dụng đối số được phân tách bằng dấu cách trong ngăn Kiểu.

Bạn cũng sẽ thấy cú pháp trong ngăn Đã tính toán và chú giải công cụ Inspect Mode (Chế độ kiểm tra).

Công cụ cho nhà phát triển đang sử dụng cú pháp mới vì các tính năng CSS sắp ra mắt như color() không hỗ trợ cú pháp đối số được phân tách bằng dấu phẩy đã ngừng hoạt động.

Cú pháp đối số được phân tách bằng dấu cách đã được hỗ trợ trong hầu hết các trình duyệt trong một thời gian. Hãy xem phần Tôi có thể sử dụng các ký hiệu màu chức năng được phân tách bằng dấu cách không?

Lỗi Chromium: #1072952

Ngừng sử dụng ngăn Thuộc tính trong bảng điều khiển Phần tử

Không dùng ngăn Thuộc tính trong bảng điều khiển Phần tử nữa. Thay vào đó, hãy chạy console.dir($0) trong Bảng điều khiển.

Ngăn Thuộc tính không dùng nữa.

Tài liệu tham khảo:

Hỗ trợ lối tắt ứng dụng trong ngăn Tệp kê khai

Lối tắt ứng dụng giúp người dùng nhanh chóng bắt đầu các thao tác phổ biến hoặc được đề xuất trong một ứng dụng web. Trình đơn lối tắt ứng dụng chỉ xuất hiện cho các Ứng dụng web tiến bộ được cài đặt trên máy tính hoặc thiết bị di động của người dùng.

Hãy xem bài viết Nhanh chóng hoàn thành công việc bằng lối tắt ứng dụng để tìm hiểu thêm.

Lối tắt ứng dụng trong ngăn Tệp kê khai.

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.