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 sẽ 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 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, bạn có thể tìm thấy thông tin gỡ lỗi và nhật ký về trình phát video trong chrome://media-internals.

Bảng điều khiển 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à dòng thời gian giải mã khung hình trong cùng một thẻ trình duyệt với 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 xảy ra hiện tượng rớt 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 của nút thông qua trình đơn theo bối cảnh trong bảng điều khiển Elements (Phần tử).

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

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

Vấn đề về Chromium: 1100253

Nội dung cập nhật cho 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 hiện đã bị ẩn trong thẻ Vấn đề. Chọn hộp đánh dấu Bao gồm cả vấn đề của cookie bên thứ ba mới để xem các vấn đề này.

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

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

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

Mở thẻ Kết xuất và sử dụng tính năng mới Tắt phông chữ trên máy để 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, 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 phông chữ trên máy bị thiếu

Thông thường, nhà phát triển và nhà thiết kế sử dụng 2 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 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ữ trên web
  • Xác minh tính chính xác của các quy tắc CSS @font-face
  • 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 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

Idle Detection API 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 không hoạt động. 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 không hoạt động 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 không hoạt động thực tế thay đổi. Bạn có thể mở thẻ Cảm biến trong 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 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 để trang được kết xuất 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 prefers-reduced-data

Vấn đề về Chromium: 1096068

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

Giờ đây, Công cụ cho nhà phát triển hỗ trợ tốt hơn một số tính năng ngôn ngữ mới nhất của JavaScript:

  • Toán tử gán logic – Công cụ cho nhà phát triển hiện hỗ trợ việc gán logic bằng các toán tử mới &&=, ||= và ??= trong bảng điều khiển và bảng điều khiển Nguồn.
  • In dấu phân cách số theo cách dễ đọc – Giờ đây, Công cụ cho nhà phát triển sẽ in dấu phân cách số theo cách dễ đọc 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.

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

Các bài 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 xác định kích thước – Kiểm tra xem width và height rõ ràng có được đặt 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 các ảnh động không được ghép. Báo cáo ảnh động không được ghép xuất hiện kém chất lượng và làm giảm CLS.
  • Theo dõi các sự kiện unload. Báo cáo sự kiện unload. Hãy cân nhắc dùng sự kiện pagehide hoặc visibilitychange thay vì sự kiện unload vì sự kiện này không kích hoạt một cách đáng tin cậy.

Các bài kiểm tra được cập nhật trong Lighthouse 6.2:

  • Xoá JavaScript không dùng đến. Lighthouse hiện 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 danh sách "cá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, Công cụ cho nhà phát triển hiển thị một danh sách lồng nhau trong bảng điều khiển Ứng dụng > ngăn Worker dịch vụ.

Liên kết đến các nguồn khác

Vấn đề về Chromium: 807440

Hiện thông tin tóm tắt về phạm vi bảo hành cho các mặt hàng được lọc

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

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

Vấn đề về Chromium: 1061385

Chế độ xem thông tin chi tiết về khung hình mới trong bảng điều khiển Ứng dụng

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị chế độ xem chi tiết cho từng khung hình. Truy cập vào khung này bằng cách nhấp vào một khung trong trình đơn Khung trong bảng Ứng dụng.

Chế độ xem thông tin chi tiết về khung hình mới 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ở có thêm thông tin bảo mật.

Đã mở thông tin chi tiết về khung cửa sổ

Vấn đề về Chromium: 1107766

Thông tin về bảo mật và sự tách biệt (COEP / COOP)

Giờ đây, Công cụ cho nhà phát triển sẽ 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 thông tin chi tiết về khung.

Thông tin về tính bảo mật và sự tách biệt

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

Vấn đề về Chromium: 1051466

Nội dung cập nhật cho bảng điều khiển Elements và Network

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

Công cụ cho nhà phát triển hiện cung cấp các đề 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, 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 (Phần tử)

Ngăn Thuộc tính đã quay trở lại sau khi không được dùng nữa trong Chrome 84. Trong phiên bản DevTools sắp tới, 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ử.

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 một 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 đị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 các 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 được mã hoá bằng base-64, được tuần tự hoá vùng đệm giao thức. Để nội dung minh bạch hơn đối với nhà phát triển, DevTools hiện đang hiển thị các giá trị đã 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 Styles (Kiểu)

Giờ đây, các kiểu chữ đã nhập sẽ được thêm vào danh sách tự động hoàn thành CSS khi bạn 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 trên máy cục bộ. Tên này xuất hiện trong danh sách hoàn tất CSS. Trước đây thì không.

Tự động hoàn thành phông chữ tuỳ chỉ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

Giờ đây, DevTools luôn hiển thị cùng một loại tài nguyên như yêu cầu mạng ban đầu và thêm / Redirect vào giá trị cột Loại khi xảy ra quá trình chuyển hướng (trạng thái 302).

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

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

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ó các nút Xoá. Khi bạn nhấp vào Xoá, mọi văn bản bạn đã nhập sẽ bị xoá.

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

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