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 bằng thẻ Vấn đề mới

Thẻ Vấn đề mới trong Ngăn nhằm giúp giảm tình trạng phiền toái do thông báo gây ra và sự lộn xộn của Bảng điều khiển. Hiện tại, Bảng điều khiển là nơi trung tâm để các nhà phát triển trang web, thư viện, khung và chính Chrome ghi lại thông báo, 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à có thể hành động, liên kết đến các tài nguyên bị ảnh hưởng trong DevTools và đưa ra hướng dẫn về cách khắc phục các vấn đề. Theo thời gian, ngày càng có nhiều cảnh báo của Chrome xuất hiện trong thẻ Vấn đề thay vì trong Console. Điều này sẽ giúp giảm tình trạng lộn xộn của Console.

Hãy xem bài viết Tìm và khắc phục sự cố bằng thẻ Vấn đề trong Chrome DevTools để bắt đầu.

Thẻ Vấn đề.

Lỗi Chromium: #1068116

Xem thông tin hỗ trợ tiếp cận trong chú giải công cụ của Chế độ kiểm tra

Chú giải công cụ của Chế độ kiểm tra hiện cho biết liệu phần tử có tên và vai trò có thể truy cập được hay không và có thể đặt tiêu điểm bằng bàn phím hay không.

Chú giải công cụ Chế độ kiểm tra có thông tin 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 điều khiển Hiệu suất hiện hiển thị thông tin về 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 định lượng thời gian cần thiết để có thể sử dụng một trang. Về cơ bản, chỉ số này đo lường thời gian một trang xuất hiện để có thể sử dụng (vì nội dung của trang đã được kết xuất lên màn hình) nhưng thực sự không thể 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ố trong 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.

Để nhận thông tin về Tổng thời gian chặn, đừng sử dụng quy trình công việc Tải lại trang 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 rồi dừng ghi. Nếu bạn thấy Total Blocking Time: Unavailable, tức là DevTools không nhận được thông tin cần thiết từ dữ liệu phân tích tài nguyên 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 trong bảng điều khiển Hiệu suất.

Lỗi Chromium: #1054381

Sự kiện Layout Shift trong mục 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 bố cục. Mức thay đổi bố cục tích luỹ (CLS) là một chỉ số có thể giúp bạn định lượng mức độ không ổn định không mong muốn của hình ảnh và 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 Layout Shift (Thay đổi bố cục) để xem thông tin chi tiết về thay đổi bố cục trong thẻ Summary (Tóm tắt). Di chuột qua các trường Đã di chuyển từ và Đã di chuyển đến để xem vị trí xảy ra sự thay đổi bố cục.

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

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

Khi ghi nhật ký Promise, Console từ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ật ngữ "đã giải quyết" cũ.

Console hiện sử dụng thuật ngữ fulfilled, tương thích với thông số kỹ thuật Promise:

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

Lỗi V8: #6751

Thông tin cập nhật về ngăn Phong cách

Hỗ trợ 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ẽ huỷ bỏ giá trị dạng thác của một thuộc tính về giá trị mà thuộc tính đó sẽ có 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 để 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 bản xem trước hình ảnh trong chú giải công cụ.

Di chuột lên một giá trị background-image.

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 đổi giữa các cách thể hiện màu trong ngăn Styles (Kiểu) bằng cách giữ Shift rồi nhấp vào giá trị màu, giờ đây, 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 (Đã tính toán) và chú giải công cụ của 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 còn được 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. Xem bài viết Tôi có thể sử dụng 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 Properties (Thuộc tính) trong bảng điều khiển Elements (Phần tử)

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

Ngăn Thuộc tính không còn được 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 thao tác đề xuất trong ứng dụng web. Trình đơn lối tắt ứng dụng chỉ hiển thị 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 Làm 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 các 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 cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.