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

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.

Trước khi 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, thông tin ghi nhật ký và gỡ lỗi về trình phát video có thể được tìm thấy trong chrome://media-internals.

Bảng điều khiển Nội dung nghe nhìn mới giúp bạn xem sự kiện, nhật ký, thuộc tính và dòng thời gian của khung một cách dễ dàng hơn giải mã trong cùng một thẻ trình duyệt giống 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 xảy ra nhanh hơn (ví dụ: lý do khiến khung hình bị rớt, lý do JavaScript lại tương tác người chơi theo cách bất ngờ).

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 thành phần đó rồi chọn 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.

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 chế độ cài đặt Bao gồm các vấn đề về cookie của bên thứ ba để xem chúng.

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 những thành phần bị thiếu local() nguồn trong 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 quy tắc đó 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 chế độ Tắt phông chữ trên máy, Công cụ cho nhà phát triển sẽ bỏ qua phông chữ local() và tìm nạp các phông chữ đó từ mạng.

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 với trạng thái không hoạt động thay đổi. 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 trong Ngăn.

Vấn đề về Chromium: 1090802

Mô phỏng prefers-reduced-data

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

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.

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ợ chỉ định logic với các toán tử &&=, ||= 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 có thể 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 các thay đổi.

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, hữu ích cho xác định những tác nhân gây chậm trễ nhất trong quá trình nhập dữ liệu.
• 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 với một để liên kết có thể được khám phá.
• 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 được ghép xuất hiện hiện tượng giật và 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. Cân nhắc sử dụng pagehide hoặc Thay vào đó, visibilitychange sự kiện 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ẽ tăng cường 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 "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ụ từ các nguồn khác trong một thẻ trình duyệt – 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 > Trình chạy dịch vụ .

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 độ phù hợp khi các bộ lọc được áp dụng 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ề phạm vi bảo hiểm.

Trong ví dụ bên dưới, hãy chú ý đến nội dung ban đầu của phần tóm tắt 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. rồi nói 57 kB of 604 kB (10%) used so far. 546 kB unused. sau khi áp dụng bộ lọc CSS.

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 khung này bằng cách nhấp vào một khung trong phần Khung trong bảng điều khiển Application (Ứ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 trong số các cửa sổ đang mở có chứa thông tin bảo mật bổ sung.

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 thông tin chi tiết về khung hình.

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 vấn đề này, hãy mở công cụ chọn màu của color trong ngăn Kiểu. Sau khi bạn mở rộng phần Tỷ lệ tương phản, Công cụ cho nhà phát triển sẽ cung cấp AA và gợi ý màu 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 tương lai của Công cụ cho nhà phát triển, 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ử.

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 X-Client-Data các giá trị tiêu đề 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 trên trình duyệt. Các giá trị tiêu đề thô trông giống như các chuỗi mờ vì chúng được mã hoá base-64, bộ đệm giao thức tuần tự. Để nội dung rõ ràng hơn cho nhà phát triển, Công cụ cho nhà phát triển được giờ đây đang hiển thị các giá trị được giải mã.

Vấn đề về Chromium: 1103854

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

Giờ đây, các khuôn mặt phông chữ đã nhập sẽ được thêm vào danh sách tự động hoàn tất CSS khi chỉnh sửa font-family trong ngăn Styles (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ộ. Quảng cáo này được hiển thị trong danh sách hoàn tất CSS. Trước đây thì chưa.

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 giờ đây 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à sẽ thêm / Redirect vào giá trị cột Type (Loại) khi chuyển hướng (trạng thái 302) xảy ra.

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

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 lọc trong ngăn Kiểu và bảng điều khiển Mạng, cũng như văn bản tìm kiếm DOM trong bảng Phần tử, giờ đây có nút Xoá. Nhấp vào Xoá sẽ xoá mọi văn bản mà bạn có thông tin đầu vào.

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ố 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.

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.