Cập nhật công cụ phát triển Google Chrome 86

Google Chrome 86, sẽ được phát hành vào ngày 6 tháng 10 năm 2020, sẽ bao gồm phiên bản cập nhật của Công cụ dành cho nhà phát triển. Bản cập nhật giới thiệu các tính năng mới giúp mở rộng tính hữu ích của công cụ. Các nhà xuất bản có thể gỡ lỗi video trong một không gian phương tiện mới, dễ dàng truy cập, có quyền truy cập vào nhiều trình mô phỏng hơn và hưởng lợi từ việc kiểm tra tốt hơn từ Lighthouse lên đến 6.2.

Ảnh chụp màn hình trình gỡ lỗi video cho New Media Panel

Bảng điều khiển phương tiện mới

Các công cụ phát triển của Chrome hiện có một bảng điều khiển phương tiện mà bạn có thể sử dụng để gỡ lỗi video.

Hướng dẫn từng bước để truy cập trường phương tiện:

  1. Nhấp vào ba dấu chấm sẽ hiển thị nhiều tùy chọn hơn.
  2. Chọn thêm công cụ
  3. Chọn Phương tiện để xem công cụ gỡ lỗi video mới.

Hình minh họa cho thấy cách truy cập bảng điều khiển phương tiện

Trong khu vực phương tiện mới, bạn có thể xem lại các thuộc tính, sự kiện, tin nhắn và mốc thời gian.

Ảnh chụp màn hình các tab trong vùng đa phương tiệnTheo Google:

  • “Tab Thuộc tính hiển thị các thuộc tính của trình phát đa phương tiện.
  • Nhấp vào tab Sự kiện để xem tất cả các sự kiện của trình phát đa phương tiện.
  • Nhấp vào tab Tin nhắn để xem nhật ký tin nhắn của trình phát đa phương tiện. Bạn có thể lọc các tin nhắn theo cấp độ nhật ký hoặc theo chuỗi.
  • Bạn có thể xem phát lại phương tiện và trạng thái bộ đệm trực tiếp trên tab Dòng thời gian. “

quảng cáo

Đọc bên dưới

Chụp ảnh màn hình của các nút

Bây giờ bạn có thể chụp ảnh màn hình của các nút cụ thể thông qua menu thả xuống theo ngữ cảnh trong bảng yếu tố.

Ảnh chụp màn hình menu ngữ cảnh để chụp ảnh màn hình

Mô phỏng các phông chữ cục bộ bị thiếu

Khi tính năng này được kích hoạt, tính năng này sẽ bỏ qua các phông chữ trên máy tính của bạn và hoạt động như thể các phông chữ bị thiếu. Điều này sẽ cho phép công cụ phát triển tìm nạp phông chữ giống như một khách truy cập mới để bạn có thể gỡ lỗi quy trình.

quảng cáo

Đọc bên dưới

Mô phỏng dữ liệu giảm ưu tiên

Đây là cài đặt có thể mô phỏng khách truy cập trang web có cài đặt trình duyệt cho chế độ tiết kiệm dữ liệu. Sau đó, truy vấn phương tiện CSS “Ưu tiên-Giảm-Dữ liệu” có thể hiển thị một hình ảnh nhỏ hơn.
Ảnh chụp màn hình của một cài đặt mô phỏng
Đây là một tính năng thử nghiệm.

W3c đã làm dấy lên lo ngại rằng tính năng này có thể được sử dụng để xác định người dùng có thu nhập thấp.

quảng cáo

Đọc bên dưới

“Đặc điểm này có thể là một nguồn không mong muốn của dấu vân tay, với xu hướng thu nhập thấp với dữ liệu hạn chế. Một phần quyền riêng tư và bảo mật nên được thêm vào thông số kỹ thuật này để giải quyết vấn đề này.

Truy vấn phương tiện này được hỗ trợ bắt đầu từ Chrome 85, bao gồm cả Microsoft Edge dựa trên Chrome.

Bằng cách bật mô phỏng này, nhà xuất bản có thể xem và gỡ lỗi hoạt động của các trang web đối với những trường hợp này.

Ngọn hải đăng 6.2

Bản cập nhật này bổ sung nhiều bản sửa lỗi và cải tiến.

Đây là một số cải tiến, theo Google:

  1. “Tránh các nhiệm vụ dài dòng chính. Báo cáo các tác vụ dài nhất trong chuỗi chính, điều này rất hữu ích để xác định những tác nhân tồi tệ nhất gây ra sự chậm trễ đầu vào
  2. Các liên kết có thể thu thập thông tin. Xác minh rằng thuộc tính href của các phần tử neo trỏ đến một mục tiêu thích hợp để các liên kết có thể được nhận ra.
  3. Phần tử hình ảnh chưa được kích thước – Xác minh rằng phần tử hình ảnh có chiều rộng và chiều cao được đặt rõ ràng. Kích thước hình ảnh rõ ràng có thể làm giảm sự thay đổi bố cục và cải thiện CLS.
  4. Tránh các hoạt ảnh không hợp chất. Báo cáo các hoạt ảnh không hợp chất có vẻ bị giật và giảm CLS.
  5. Lắng nghe các sự kiện phóng điện. Báo cáo sự kiện xả. Cân nhắc sử dụng pagehide hoặc là Thay đổi mức độ hiển thị Sự kiện diễn ra vì sự kiện phóng điện không được kích hoạt một cách đáng tin cậy. “

quảng cáo

Đọc bên dưới

Trên đây chỉ là danh sách một phần và giải thích về những thay đổi khác nhau. Có những cải tiến khác như hỗ trợ các chức năng JavaScript mới.

Đọc thông báo chính thức
https://developers.google.com/web/updates/2020/08/devtools

Trang hỗ trợ bảng điều khiển phương tiện
https://developers.google.com/web/tools/chrome-devtools/media

Mô tả chính thức của W3C về Sở thích-Giảm-Dữ liệu-Người dùng-Sở thích
https://www.w3.org/TR/mediaqueries-5/#prefers-rednced-data

Lighthouse 6.2 Nhật ký thay đổi
https://github.com/GoogleChrome/lighthouse/releases/tag/v6.2.0

Nguồn: www.searchenginejournal.com

Trả lời