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

Kayce Basques
Kayce Basques
X GitHub

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

Thẻ Vấn đề mới trong Ngăn kéo nhằm mục đích giúp giảm tình trạng quá tải thông báo và sự lộn xộn của Console. Hiện tại, Bảng điều khiển là nơi tập trung để các nhà phát triển trang web, thư viện, khung và chính Chrome ghi lại các thông báo, cảnh báo và lỗi. Thẻ Vấn đề trình bày các cảnh báo của 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 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 có nhiều cảnh báo của Chrome xuất hiện trong thẻ Vấn đề thay vì Bảng điều khiển. Điều này sẽ giúp giảm bớt sự lộn xộn của Bảng điều khiển.

Hãy xem bài viết Tìm và khắc phục vấn đề bằng thẻ Vấn đề của Công cụ cho nhà phát triển trên Chrome để 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ụ Chế độ kiểm tra

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

Chú thích 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, giờ đây, bảng điều khiển Hiệu suất sẽ 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 để một trang có thể sử dụng được. 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 hiển thị trên màn hình) nhưng thực tế không thể sử dụng 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ố 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.

Để nhận thông tin về Tổng thời gian chặn, không sử dụng quy trình 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 Ghi 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 biểu tượng Total Blocking Time: Unavailable, tức là DevTools 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 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

Mục 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 sự thay đổi 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 độ ổn định hình ảnh không mong muốn 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ề sự kiện thay đổi bố cục trong thẻ Summary (Tóm tắt). Di chuột lên các trường Đã di chuyển từ và Đã di chuyển đến để hình dung vị trí xảy ra sự thay đổi bố cục.

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

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

Khi ghi nhật ký Promise, Console đã mô tả sai 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ũ.

Giờ đây, Console sử dụng thuật ngữ fulfilled, phù hợp với quy cách 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 kiểu

Hỗ trợ từ khoá revert

Giờ đây, giao diện người dùng tự động hoàn thành của ngăn Styles (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 một thuộc tính về giá trị ban đầu 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 để hoàn nguyên.

Lỗi Chromium: #1075437

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

Di chuột lên một giá trị background-image trong ngăn Kiểu để xem bản xem trước của hình ảnh trong chú giải công cụ.

Di chuột lên 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

CSS Color Module Level 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 chuyển đổi giữa các cách biểu thị màu trong ngăn Styles (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ú 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ú thích 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 một thời gian. Xem phần 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 Thuộc tính trong bảng điều khiển Phần tử

Ngăn Properties (Thuộc tính) trong ngăn Elements (Phần tử) không được dùng 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 được dùng nữa.

Tài liệu tham khảo:

Hỗ trợ lối tắt ứng dụng trong ngăn Manifest

Lối tắt của ứ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 được đề xuất trong một ứng dụng web. Trình đơn lối tắt của ứng dụng chỉ xuất hiện đối với những Ứ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 Manifest (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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.