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

Jecelyn Yeen

Bảng điều khiển nội dung nghe nhìn mới

Giờ đây, Công cụ cho nhà phát triển hiển thị thông tin về trình phát nội dung nghe nhìn trong bảng điều khiển Nội dung nghe nhìn.

Bảng điều khiển nội dung nghe nhìn mới

Trước bảng điều khiển nội dung nghe nhìn mới trong Công cụ cho nhà phát triển, bạn có thể tìm thấy thông tin ghi nhật ký và gỡ lỗi về trình phát video trong chrome://media-internals.

Bảng điều khiển Nội dung đa phương tiện mới giúp bạn xem sự kiện, nhật ký, thuộc tính và dòng thời gian giải mã khung hình dễ dàng hơn trong cùng một thẻ trình duyệt như chính trình phát video. Bạn có thể xem trực tiếp và kiểm tra các vấn đề tiềm ẩn nhanh hơn (ví dụ: lý do khung hình bị rớt xảy ra, lý do JavaScript tương tác với trình phát theo cách không mong muốn).

Vấn đề về Chromium: 1018414

Chụp ảnh màn hình nút thông qua trình đơn theo bối cảnh của bảng điều khiển Phần tử

Giờ đây, bạn có thể chụp ảnh màn hình nút thông qua trình đơn theo bối cảnh trong bảng điều khiển Phần tử.

Ví dụ: Bạn có thể chụp ảnh màn hình bảng nội dung bằng cách nhấp chuột phải vào phần tử đó rồi chọn Capture button snapshot (Chụp ảnh màn hình nút).

Chụp ảnh màn hình nút

Vấn đề về Chromium: 1100253

Cập nhật thẻ Vấn đề

Thanh cảnh báo Vấn đề trên Bảng điều khiển hiện đã được thay thế bằng một thông báo thông thường.

Vấn đề trong thông báo trên bảng điều khiển

Theo mặc định, các vấn đề về cookie của bên thứ ba sẽ được ẩn trong thẻ Vấn đề. Bật hộp đánh dấu Bao gồm cả vấn đề về cookie của bên thứ ba mới để xem các vấn đề đó.

hộp đánh dấu các vấn đề về cookie của bên thứ ba

Vấn đề về Chromium: 1096481, 1068116, 1080589

Mô phỏng các phông chữ bị thiếu trên máy

Mở thẻ Hiển thị và sử dụng tính năng Tắt phông chữ trên máy mới để mô phỏng các nguồn local() bị thiếu trong các quy tắc @font-face.

Ví dụ: khi phông chữ "Rubik" được cài đặt trên thiết bị của bạn và quy tắc @font-face src sử dụng phông chữ này làm phông chữ local(), Chrome sẽ sử dụng tệp phông chữ trên thiết bị của bạn.

Khi bật tuỳ chọn Tắt phông chữ trên máy, Công cụ cho nhà phát triển sẽ bỏ qua các phông chữ local() và tìm nạp các phông chữ đó từ mạng.

Mô phỏng các phông chữ bị thiếu trên máy

Thông thường, nhà phát triển và nhà thiết kế sử dụng hai bản sao khác nhau của cùng một phông chữ trong quá trình phát triển:

Một phông chữ cục bộ cho các công cụ thiết kế của bạn và
Phông chữ trên web cho mã của bạn

Việc tắt phông chữ trên máy sẽ giúp bạn dễ dàng:

Gỡ lỗi và đo lường hiệu suất và tối ưu hoá khi tải phông chữ trên web
Xác minh tính chính xác của các quy tắc @font-face về CSS
Tìm hiểu mọi điểm khác biệt giữa phông chữ trên web và phiên bản trên máy

Vấn đề về Chromium: 384968

Mô phỏng người dùng không hoạt động

API Phát hiện trạng thái rảnh cho phép nhà phát triển phát hiện người dùng không hoạt động và phản ứng khi có những thay đổi về trạng thái ở trạng thái rảnh. Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng các thay đổi về trạng thái rảnh trong thẻ Cảm biến cho cả trạng thái người dùng và trạng thái màn hình thay vì chờ trạng thái rảnh thực tế thay đổi. Bạn có thể mở thẻ Cảm biến từ Ngăn.

Mô phỏng người dùng không hoạt động

Vấn đề về Chromium: 1090802

Mô phỏng `prefers-reduced-data`

Truy vấn nội dung nghe nhìn prefers-reduced-data sẽ phát hiện xem người dùng có muốn nhận nội dung thay thế sử dụng ít dữ liệu hơn cho trang được hiển thị hay không.

Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng truy vấn nội dung nghe nhìn prefers-reduced-data.

Mô phỏng tính năng prefers-reduced-data

Vấn đề về Chromium: 1096068

Hỗ trợ các tính năng JavaScript mới

Công cụ cho nhà phát triển hiện đã hỗ trợ tốt hơn cho một số tính năng ngôn ngữ JavaScript mới nhất:

Toán tử chỉ định logic – Công cụ cho nhà phát triển hiện hỗ trợ việc chỉ định logic với các toán tử mới &&=, ||= và ??= trong bảng điều khiển và bảng điều khiển Nguồn.
Tạo các dòng phân cách số in đẹp – Công cụ cho nhà phát triển hiện đã in đẹp các dòng phân cách số trong bảng điều khiển Nguồn.

Vấn đề về Chromium: 1086817, 1080569

Lighthouse 6.2 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse đang chạy Lighthouse 6.2. Hãy xem ghi chú phát hành để biết danh sách đầy đủ các thay đổi.

Huỷ định kích thước hình ảnh

Các hoạt động kiểm tra mới trong Lighthouse 6.2:

Tránh các tác vụ dài dòng chính. Báo cáo các tác vụ dài nhất trên luồng chính. Thông tin này rất hữu ích trong việc xác định những yếu tố góp phần gây ra độ trễ đầu vào.
Có thể thu thập dữ liệu các đường liên kết. Kiểm tra xem thuộc tính href của các phần tử liên kết có liên kết đến một đích đến thích hợp hay không để có thể tìm thấy các đường liên kết.
Phần tử hình ảnh chưa định kích thước – Kiểm tra xem width và height rõ ràng có được đặt trong các phần tử hình ảnh hay không. Kích thước hình ảnh rõ ràng có thể giúp giảm sự thay đổi về bố cục và cải thiện CLS (Mức thay đổi bố cục tích luỹ).
Tránh dùng ảnh động không được ghép. Báo cáo ảnh động không kết hợp có hiện tượng giật và làm giảm CLS (Mức thay đổi bố cục tích luỹ).
Nghe các sự kiện unload. Báo cáo sự kiện unload. Thay vào đó, hãy cân nhắc sử dụng các sự kiện pagehide hoặc visibilitychange vì sự kiện unload kích hoạt không đáng tin cậy.

Các quy trình kiểm tra được cập nhật trong Lighthouse 6.2:

Xoá JavaScript không dùng đến. Giờ đây, Lighthouse sẽ nâng cao khả năng kiểm tra nếu một trang có bản đồ nguồn JavaScript có thể truy cập công khai.

Vấn đề về Chromium: 772558

Ngừng sử dụng danh sách "các nguồn gốc khác" trong ngăn Service Workers

Công cụ cho nhà phát triển hiện cung cấp một đường liên kết để xem danh sách đầy đủ trình chạy dịch vụ của các nguồn khác trong thẻ trình duyệt mới – chrome://serviceworker-internals/?devtools.

Trước đây, Công cụ cho nhà phát triển hiển thị một danh sách được lồng trong bảng điều khiển Ứng dụng > ngăn Trình chạy dịch vụ.

Đường liên kết đến các nguồn khác

Vấn đề về Chromium: 807440

Hiển thị bản tóm tắt mức độ phù hợp cho các mục đã lọc

Công cụ cho nhà phát triển hiện sẽ tính toán lại và hiển thị linh động bản tóm tắt thông tin về mức độ sử dụng khi áp dụng các bộ lọc trong thẻ Phạm vi bao phủ. Trước đây, thẻ Phạm vi bao phủ luôn hiển thị bản tóm tắt tất cả thông tin về mức độ phù hợp.

Trong ví dụ bên dưới, hãy lưu ý phần tóm tắt ban đầu thể hiện 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., sau đó cho biết 57 kB of 604 kB (10%) used so far. 546 kB unused. sau khi bộ lọc CSS được áp dụng.

Thông tin tóm tắt về mức độ phù hợp cho các mục đã lọc

Vấn đề về Chromium: 1061385

Chế độ xem chi tiết khung mới trong bảng điều khiển Ứng dụng

Giờ đây, Công cụ cho nhà phát triển hiển thị khung hiển thị chi tiết cho từng khung hình. Bạn có thể truy cập vào ứng dụng này bằng cách nhấp vào một khung trong trình đơn Khung trong bảng điều khiển Application (Ứng dụng).

Chế độ xem chi tiết khung mới trong bảng điều khiển Ứng dụng

Vấn đề về Chromium: 1093247

Chi tiết khung cho các cửa sổ đã mở

Giờ đây, Công cụ cho nhà phát triển cũng hiển thị các cửa sổ / cửa sổ bật lên đã mở trong cây khung. Chế độ xem chi tiết khung của các cửa sổ đang mở có chứa thông tin bảo mật bổ sung.

Chi tiết khung cửa sổ đã mở

Vấn đề về Chromium: 1107766

Thông tin về bảo mật và cách ly (COEP / COOP)

Công cụ cho nhà phát triển hiện hiển thị ngữ cảnh bảo mật, Chính sách về nhiều nguồn gốc-Nhúng (COEP) và Chính sách mở trên nhiều nguồn gốc (COOP) trong phần chi tiết khung.

Thông tin về bảo mật và cách ly

Thông tin bảo mật khác sẽ sớm được thêm vào chế độ xem chi tiết về khung hình.

Vấn đề về Chromium: 1051466

Nội dung cập nhật về các phần tử và bảng điều khiển Mạng

Đề xuất màu dễ tiếp cận trong ngăn Kiểu

Công cụ cho nhà phát triển hiện cung cấp đề xuất về màu cho văn bản có độ tương phản màu thấp.

Trong ví dụ bên dưới, h1 có văn bản có độ tương phản thấp. Để khắc phục lỗi này, hãy mở công cụ chọn màu của thuộc tính color trong ngăn Kiểu. Sau khi bạn mở rộng mục Tỷ lệ tương phản, Công cụ cho nhà phát triển sẽ cung cấp các đề xuất màu AA và AAA. Nhấp vào màu được đề xuất để áp dụng màu.

Vấn đề về Chromium: 1093227

Khôi phục ngăn Thuộc tính trong bảng điều khiển Phần tử

Ngăn Thuộc tính đã quay lại và không còn được dùng trong Chrome 84. Trong phiên bản Công cụ cho nhà phát triển trong tương lai, chúng tôi sẽ cải thiện quy trình kiểm tra thuộc tính của các phần tử.

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

Vấn đề về Chromium: 1105205, 1116085

Giá trị tiêu đề `X-Client-Data` mà con người có thể đọc được trong bảng điều khiển Mạng

Khi kiểm tra tài nguyên mạng trong bảng điều khiển Mạng, Công cụ cho nhà phát triển hiện sẽ định dạng mọi giá trị tiêu đề X-Client-Data trong ngăn Tiêu đề dưới dạng mã.

Tiêu đề HTTP X-Client-Data chứa danh sách mã thử nghiệm và cờ Chrome được bật trong trình duyệt. Các giá trị tiêu đề thô trông giống như các chuỗi mờ vì chúng là bộ đệm giao thức tuần tự được mã hoá base-64. Để nội dung rõ ràng hơn cho nhà phát triển, Công cụ cho nhà phát triển hiện đang hiển thị các giá trị được giải mã.

Giá trị tiêu đề "X-Client-Data" mà con người có thể đọc được

Vấn đề về Chromium: 1103854

Tự động hoàn thành phông chữ tuỳ chỉnh trong ngăn Kiểu

Các khuôn mặt phông chữ đã nhập hiện được thêm vào danh sách tự động hoàn tất CSS khi chỉnh sửa thuộc tính font-family trong ngăn Kiểu.

Trong ví dụ này, 'Noto Sans' là phông chữ tuỳ chỉnh được cài đặt trong máy cục bộ. Nó xuất hiện trong danh sách hoàn thành CSS. Trước đây thì chưa.

Phông chữ tuỳ chỉnh tự động hoàn thành

Vấn đề về Chromium: 1106221

Hiển thị nhất quán loại tài nguyên trong bảng điều khiển Mạng

Công cụ cho nhà phát triển hiện hiển thị nhất quán cùng một loại tài nguyên với yêu cầu mạng ban đầu và thêm / Redirect vào giá trị cột Type (Loại) khi chuyển hướng (trạng thái 302).

Công cụ cho nhà phát triển trước đây đôi khi đã thay đổi loại này thành Other.

Hiển thị loại tài nguyên chuyển hướng

Vấn đề về Chromium: 997694

Xoá nút trong bảng điều khiển Phần tử và Mạng

Các hộp văn bản bộ lọc trong ngăn Kiểu và bảng điều khiển Mạng, cũng như hộp văn bản tìm kiếm DOM trong bảng Phần tử hiện có các nút Xoá. Thao tác nhấp vào Xoá sẽ xoá mọi văn bản bạn đã nhập.

Xoá nút trong bảng điều khiển Phần tử và Mạng

Vấn đề về Chromium: 1067184

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.