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 cảm giác nhàm chán và lộn xộn khi phải nhận thông báo Bảng điều khiển. Hiện tại, Console là trung tâm dành cho nhà phát triển trang web, thư viện, khung và chính Chrome để ghi nhật ký thông điệp, cảnh báo và lỗi. Thẻ Vấn đề trình bày các cảnh báo từ trình duyệt theo một cách có cấu trúc, tổng hợp và hữu ích, cũng như liên kết đến 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 sự cố. Theo thời gian, ngày càng nhiều cảnh báo của Chrome sẽ hiển thị trong thẻ Vấn đề thay vì Bảng điều khiển, điều này sẽ giúp ích cho Bảng điều khiển bớt lộn xộ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 sẽ cho biết phần tử có tên và vai trò dễ tiếp cận hay không và có thể làm tâm điểm bằng bàn phím.

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ị 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 thời gian lấy một trang để sử dụng được. Về cơ bản, đo lường mức độ sử dụng một trang xuất hiện (vì nội dung của nội dung đã đượ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, do đó trang không thể phản hồi hoạt động đầu vào của người dùng. TBT là phòng thí nghiệm chính để ướ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, đừng sử dụng Trang tải lại để ghi lại hiệu suất tải trang. Thay vào đó, hãy nhấp vào Record (Ghi) Ghi âm , tải lại trang theo cách thủ công, chờ trang tải rồi ngừng ghi. Nếu bạn thấy Total Blocking Time: Unavailable 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ừ công cụ đó 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 và là một trong những chỉ số mới của Google Chỉ số quan trọng chính của trang web.

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 nơi 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ề Bảng điều khiển sử dụng thuộc tính "đã giải quyết" cũ thuật ngữ liên quan.

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:

Ví dụ về việc Console sử dụng thành phần "đã hoàn tất" mới thuật ngữ liên quan.

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 hoàn nguyên giá trị xếp tầng của một thuộc tính thành giá trị lẽ ra sẽ là gì nếu không có thay đổi nào được thực hiện đối với thuộc tính 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ợ đố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 bạn chọn màu bằng Công cụ chọn màu hoặc thay thế giữa các bản trình bày màu trong Ngăn Kiểu bằng cách giữ phím Shift rồi nhấp vào giá trị màu, giờ đây bạn sẽ thấy các dấu cách được phân tách bằng dấu cách cú pháp đối số.

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ợ không dùng cú pháp đối số được phân tách bằng dấu phẩy nữa.

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. Xem phần Tôi có thể sử dụng không Ký hiệu màu chức năng được phân tách bằng dấu cách?

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. 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 công việc phổ biến hoặc được đề xuất trong một ứng dụng web. Ứng dụng trình đơn lối tắt chỉ hiển thị cho các Ứng dụng web tiến bộ được cài đặt trên màn hình của người dùng hoặc thiết bị di động của bạn.

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