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 vấn đề về trang web thông qua thẻ "Vấn đề" mới

Thẻ Vấn đề mới trong Ngăn chứa mục đích giúp giảm 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 lại 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 cách có cấu trúc, tổng hợp và hữu ích, 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 và 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ì trong Console, nhờ đó 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 đề về 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ú giải công cụ Kiểm tra Chế độ cho biết liệu phần tử có tên và vai trò dễ tiếp cận và có thể lấy tiêu điểm bằng bàn phím hay không.

Chú giải công cụ Inspect Mode (Chế độ kiểm tra) có thông tin về khả năng hỗ trợ tiếp cận.

Lỗi Chromium: #1040025

Nội dung 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 điều khiển Performance (Hiệu suất) sẽ hiện thông tin Tổng thời gian chặn (TBT) ở chân trang. TBT là một chỉ số hiệu suất tải giúp xác định khoảng thời gian cần thiết để sử dụng được một trang. Về cơ bản, trình phân tích cú pháp đo lường thời lượng một trang hiển thị để sử dụng được (vì nội dung của trang đó được hiển thị trê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 hoạt động đầu vào của người dùng. TBT là chỉ số phòng thí nghiệm chính để ước tính Độ trễ đầu vào đầu tiên, một trong các Các chỉ số quan trọng về trang web mới của Google.

Để xem thông tin về Tổng thời gian chặn, bạn không nên sử dụng quy trình 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 Record (Ghi) Ghi âm , tải lại trang theo cách thủ công, đợi trang tải rồi dừng ghi. Nếu bạn thấy Total Blocking Time: Unavailable, thì 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 điều khiển Hiệu suất.

Lỗi Chromium: #1054381

Các sự kiện Thay đổi bố cục 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 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. Đây là một trong những 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 Thay đổi bố cục để xem thông tin chi tiết về việc 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 thay đổi bố cục.

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

Thuật ngữ hứa hẹn chính xác hơn trong Console

Khi ghi nhật ký một Promise mà 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:

Một ví dụ về Play Console sử dụng thuật ngữ cũ "resolved".

Bảng điều khiển hiện sử dụng thuật ngữ fulfilled, phù hợp với quy cách Promise:

Ví dụ về Play Console sử dụng thuật ngữ mới "đã hoàn tất".

Lỗi V8: #6751

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

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

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

Đặt giá trị của thuộc tính để hoàn nguyên.

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 phần 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 chức năng đượ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() phải 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 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, bạn sẽ thấy cú pháp đối số được phân tách bằng dấu cách.

Sử dụng các đố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 Computed 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 không dùng 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. 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ử

Ngừng sử dụng ngăn Properties (Thuộc tính) trong bảng điều khiển Elements (Phần tử). 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 thông thường 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 đối với các Ứng dụng web tiến bộ đã 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 Hoàn thành công việc nhanh chóng 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 sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.