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

Bảng điều khiển New Media (Nội dung nghe nhìn mới)

Công cụ dành cho nhà phát triển hiện hiển thị thông tin về trình phát nội dung đa phương tiện trong Bảng điều khiển nội dung đa phương tiện.

Trước khi có bảng điều khiển nội dung nghe nhìn mới trong DevTools, 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 Media (Nội dung nghe nhìn) mới giúp bạn dễ dàng xem các sự kiện, nhật ký, thuộc tính và tiến trình giải mã khung hình trong cùng một thẻ trình duyệt với 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 xảy ra tình trạng bị bỏ khung hình, 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 Elements (Thành phần).

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

Vấn đề về Chromium: 1100253

Thông tin cập nhật về thẻ Vấn đề

Thanh cảnh báo về vấn đề trên bảng điều khiển của Console 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ẽ bị ẩ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 đề đó.

Các vấn đề về Chromium: 1096481, 1068116, 1080589

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

Mở thẻ Rendering (Hiển thị) và sử dụng tính năng Disable local fonts (Tắt phông chữ cục bộ) mới để mô phỏng các nguồn local() bị thiếu 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 phông chữ này làm phông chữ local(), Chrome sẽ sử dụng tệp phông chữ cục bộ trên thiết bị của bạn.

Khi bạn bật tuỳ chọn Tắt phông chữ trên máy, DevTools sẽ bỏ qua phông chữ local() và tìm nạp 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:

• Phông chữ cục bộ cho các công cụ thiết kế và
• Phông chữ web cho mã

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

• Gỡ lỗi và đo lường hiệu suất tải cũng như khả năng tối ưu hoá phông chữ web
• Xác minh tính chính xác của các quy tắc @font-face CSS
• Khám phá mọi sự khác biệt giữa phông chữ web và phiên bản cục bộ của phông chữ

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 các thay đổi về trạng thái rảnh. Giờ đây, bạn có thể sử dụng DevTools để mô phỏng các thay đổi về trạng thái rảnh trong thẻ Sensors (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.

Vấn đề về Chromium: 1090802

Mô phỏng prefers-reduced-data

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

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

Vấn đề về Chromium: 1096068

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

DevTools 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ử gán logic – DevTools hiện hỗ trợ gán logic bằng các toán tử mới &&=, ||= và ??= trong bảng điều khiển Console (Bảng điều khiển) và Sources (Nguồn).
• In đẹp dấu phân cách số – DevTools hiện in đẹp dấu 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 hiện đ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.

Các quy trình kiểm tra mới trong Lighthouse 6.2:

• Tránh những việc cần nhiều thời gian thực hiện trong chuỗi chính. Báo cáo những việc cần nhiều thời gian thực hiện nhất trong chuỗi chính. Thông tin này khá hữu ích trong việc xác định những thành phần có thời gian phản hồi tương tác chậm nhất.
• Các đường liên kết có thể thu thập thông tin. Kiểm tra xem thuộc tính href của các phần tử neo có liên kết đến một đích đến phù hợp hay không để có thể phát hiện các đường liên kết.
• Các phần tử hình ảnh chưa định cỡ – Kiểm tra xem width và height có được đặt rõ ràng trên các phần tử hình ảnh hay không. Kích thước hình ảnh rõ ràng có thể giảm sự thay đổi về bố cục và cải thiện CLS.
• Tránh dùng ảnh động không được kết hợp. Báo cáo ảnh động không được kết hợp có vẻ giật và giảm CLS.
• Nghe sự kiện unload. Báo cáo sự kiện unload. Hãy cân nhắc sử dụng sự kiện pagehide hoặc visibilitychange vì sự kiện unload không kích hoạt một cách đáng tin cậy.

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

• Xoá JavaScript không dùng đến. Giờ đây, Lighthouse sẽ nâng cao quy trình 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 mục "nguồn gốc khác" trong ngăn Trình chạy dịch vụ

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 đủ các trình chạy dịch vụ của các nguồn gốc khác trong một thẻ trình duyệt mới – chrome://serviceworker-internals/?devtools.

Trước đây, DevTools hiển thị một danh sách lồng trong bảng điều khiển Application (Ứng dụng) > ngăn Service workers (Trình chạy dịch vụ).

Vấn đề về Chromium: 807440

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

Giờ đây, DevTools sẽ tự động tính toán lại và hiển thị bản tóm tắt thông tin về mức độ sử dụng khi áp dụng bộ lọc trong thẻ Coverage (Mức sử dụng). Trước đây, thẻ Mức độ phù hợp 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 ý cách nội dung tóm tắt ban đầu là 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., sau đó là 57 kB of 604 kB (10%) used so far. 546 kB unused. sau khi áp dụng tính năng lọc CSS.

Vấn đề về Chromium: 1061385

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

Giờ đây, DevTools hiển thị chế độ xem chi tiết cho từng khung. Truy cập vào khung này bằng cách nhấp vào một khung trong trình đơn Frames (Khung) trong bảng điều khiển Application (Ứng dụng).

Vấn đề về Chromium: 1093247

Thông tin chi tiết về khung cho các cửa sổ đã mở

Công cụ cho nhà phát triển hiệ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ổ đã mở bao gồm thêm thông tin bảo mật.

Vấn đề về Chromium: 1107766

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

Giờ đây, Công cụ dành cho nhà phát triển hiển thị bối cảnh bảo mật, Cross-Origin-Embedder-Policy (COEP) và Cross-Origin-Opener-Policy (COOP) trong phần chi tiết về khung.

Chúng tôi sẽ sớm bổ sung thêm thông tin bảo mật vào chế độ xem chi tiết về khung.

Vấn đề về Chromium: 1051466

Thông tin cập nhật về bảng điều khiển Elements (Thành phần) và Network (Mạng)

Đề xuất màu hỗ trợ tiếp cận trong ngăn Kiểu

DevTools hiện cung cấp các đề xuất về màu sắc cho văn bản có độ tương phản màu thấp.

Trong ví dụ dưới đây, h1 có văn bản có độ tương phản thấp. Để khắc phục, 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 phần Tỷ lệ tương phản, DevTools sẽ đưa ra các đề xuất về 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 Properties (Thuộc tính) trong bảng điều khiển Elements (Thành phần)

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

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

Giá trị tiêu đề X-Client-Data mà con người đọ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, DevTools hiện đị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ủa bạn. Các giá trị tiêu đề thô trông giống như các chuỗi mờ vì chúng là vùng đệm giao thức được mã hoá base-64, được tuần tự hoá. Để giúp nhà phát triển nắm được nội dung rõ ràng hơn, DevTools hiện đang hiển thị các giá trị đã 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 phông chữ đã nhập sẽ được thêm vào danh sách tự động hoàn thành 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à một phông chữ tuỳ chỉnh được cài đặt trong máy cục bộ. Tệp này sẽ hiển thị trong danh sách hoàn tất CSS. Trước đây thì không.

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

Giờ đây, DevTools luôn hiển thị 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 Loại khi xảy ra lệnh chuyển hướng (trạng thái 302).

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

Vấn đề về Chromium: 997694

Nút xoá 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 điều khiển Phần tử, hiện có nút Xoá. Thao tác nhấp vào Xoá sẽ xoá mọi văn bản bạn đã nhập.

Vấn đề về Chromium: 1067184

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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.