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

Kayce Basques

Mô phỏng khiếm khuyết thị lực

Mở thẻ Kết xuất và sử dụng tính năng mới Mô phỏng khiếm khuyết về thị lực để có trải nghiệm tốt hơn ý tưởng về cách những người có các loại khiếm thị khác nhau trải nghiệm trang web của bạn.

Mô phỏng thị lực mờ.

Mô phỏng thị lực mờ.

Công cụ cho nhà phát triển có thể mô phỏng thị lực mờ và các loại khiếm khuyết về thị lực màu sau đây:

  • Mù màu đỏ: không thể nhận biết bất kỳ đèn màu đỏ nào.
  • Mù màu xanh lục: không thể nhận thấy bất kỳ đèn màu xanh lục nào.
  • Mù màu xanh dương: không thể nhận thấy bất kỳ ánh sáng màu xanh dương nào.
  • Mù màu: không thể cảm nhận được bất kỳ màu nào ngoại trừ sắc xám (rất hiếm).

Có những phiên bản ít nghiêm trọng hơn của khiếm khuyết thị giác màu này, và trên thực tế, chúng phổ biến hơn. Ví dụ: mù màu đỏ nhẹ là tình trạng giảm độ nhạy với ánh sáng đỏ (trái ngược với mù màu đỏ, mà là hoàn toàn không thể nhận biết đèn màu đỏ). Tuy nhiên, các "-omaly" này khiếm khuyết thị giác không được xác định rõ ràng: mỗi người khiếm thị như vậy là khác nhau và có thể nhìn thấy mọi thứ khác nhau (nhìn thấy màu sắc phù hợp nhiều hơn/ít hơn).

Bằng cách thiết kế các mô phỏng cực đoan hơn trong Công cụ cho nhà phát triển, ứng dụng web của bạn được đảm bảo những người mắc chứng mù màu đỏ nhẹ, mù màu xanh lục nhẹ, dị ứng nhẹ và dị ứng nhẹ.

Hãy gửi ý kiến phản hồi cho vấn đề về Chromium #1003700 hoặc đọc thêm về việc triển khai.

Mô phỏng ngôn ngữ

Giờ đây, bạn có thể mô phỏng ngôn ngữ bằng cách thiết lập một vị trí trong phần Cảm biến > Vị trí. Mở lệnh Command Trình đơn rồi nhập Sensors để truy cập vào thẻ Sensor (Cảm biến). Sau khi thực hiện những hành động này trong Công cụ cho nhà phát triển sửa đổi ngôn ngữ mặc định hiện tại, ảnh hưởng đến những vấn đề sau:

  • Các API Intl.*, ví dụ: new Intl.NumberFormat().resolvedOptions().locale
  • API JavaScript nhận biết ngôn ngữ khác, chẳng hạn như String.prototype.localeCompare và *.prototype.toLocaleString, ví dụ: 123_456..toLocaleString()
  • Các API DOM như navigator.language và navigator.languages
  • tiêu đề của yêu cầu HTTP Accept-Language

Hãy xem Ví dụ về mã phụ thuộc vào ngôn ngữ để tự mình thử nghiệm.

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1051822.

Gỡ lỗi Chính sách về trình nhúng trên nhiều nguồn gốc (COEP)

Bảng điều khiển Mạng hiện cung cấp thông tin gỡ lỗi theo Chính sách về trình nhúng trên nhiều nguồn gốc.

Giờ đây, cột Trạng thái sẽ giải thích nhanh về lý do chặn yêu cầu cũng như để xem tiêu đề của yêu cầu đó nhằm gỡ lỗi thêm:

Các yêu cầu bị chặn trong cột Trạng thái

Phần Tiêu đề phản hồi của thẻ Tiêu đề cung cấp thêm hướng dẫn về cách giải quyết vấn đề:

Hướng dẫn thêm trong phần Tiêu đề phản hồi

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1051466.

Biểu tượng mới cho điểm ngắt, điểm ngắt có điều kiện và điểm nhật ký

Bảng điều khiển Sources (Nguồn) có các biểu tượng mới cho điểm ngắt, điểm ngắt có điều kiện và điểm nhật ký:

Động lực để ra mắt các biểu tượng mới là giúp giao diện người dùng nhất quán hơn với các công cụ gỡ lỗi GUI khác (thường tô màu điểm ngắt màu đỏ) và để dễ dàng phân biệt giữa 3 tính năng tại trong nháy mắt.

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1041830.

Sử dụng từ khoá bộ lọc cookie-path mới trong bảng điều khiển Mạng để tập trung vào các yêu cầu về mạng để thiết lập một đường dẫn cookie cụ thể.

Hãy tham khảo bài viết Lọc yêu cầu theo cơ sở lưu trú để khám phá các từ khoá đặc biệt khác như cookie-path.

Gắn sang trái trong trình đơn Command

Mở Trình đơn lệnh rồi chạy lệnh Dock to left để di chuyển Công cụ cho nhà phát triển sang bên trái khung nhìn.

Công cụ cho nhà phát triển được gắn ở bên trái khung nhìn

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1011679.

Lựa chọn Settings trong Trình đơn chính đã được di chuyển

Giờ đây, bạn có thể tìm thấy tuỳ chọn để mở phần Cài đặt từ Trình đơn chính trong mục Công cụ khác.

"Trình đơn chính" mở bằng "Công cụ khác" tập trung vào 'Cài đặt'

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1050855.

Bảng điều khiển Audits (Kiểm tra) nay là bảng điều khiển Lighthouse

Các nhóm Công cụ cho nhà phát triển và Lighthouse thường xuyên nhận phản hồi từ các nhà phát triển web rằng họ sẽ nhận được có thể chạy Lighthouse từ Công cụ cho nhà phát triển, nhưng khi họ dùng thử, họ không tìm thấy " Lighthouse" nên bảng điều khiển Audits (Kiểm tra) giờ là bảng điều khiển Lighthouse.

Bảng điều khiển Lighthouse

Xoá tất cả lệnh Ghi đè cục bộ trong thư mục

Sau khi thiết lập Ghi đè cục bộ, giờ đây bạn có thể nhấp chuột phải vào thư mục và chọn nút Xoá mới tất cả cơ chế ghi đè để xoá mọi cơ chế Ghi đè cục bộ trong thư mục đó.

Xoá mọi cơ chế ghi đè

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1016501.

Đã cập nhật giao diện người dùng Tác vụ dài

Tác vụ dài là mã JavaScript độc quyền luồng chính trong một thời gian dài, gây ra tình trạng web trang bị treo.

Trước đây, bạn có thể hình ảnh hoá những Tác vụ dài trong bảng Hiệu suất, nhưng trong Giao diện người dùng hình ảnh hoá của Chrome 83 trong bảng điều khiển Hiệu suất đã được cập nhật. Nhiệm vụ dài một phần của công việc giờ đây được tô màu bằng nền đỏ có sọc.

Giao diện người dùng mới của Tác vụ dài

Gửi ý kiến phản hồi tới Vấn đề về Chromium #1054447.

Hỗ trợ biểu tượng có thể dán trong ngăn Tệp kê khai

Android Oreo ra mắt biểu tượng thích ứng, hiển thị biểu tượng ứng dụng với nhiều hình dạng khác nhau kiểu thiết bị khác nhau. Biểu tượng có thể che là định dạng biểu tượng mới hỗ trợ biểu tượng thích ứng, giúp bạn đảm bảo biểu tượng PWA trông ổn trên những thiết bị hỗ trợ che giấu biểu tượng chuẩn.

Bật hộp đánh dấu mới Chỉ hiện khu vực an toàn tối thiểu cho các biểu tượng có thể che giấu trong Tệp kê khai để kiểm tra xem biểu tượng có thể che mờ có trông đẹp mắt trên thiết bị Android Oreo hay không. Hãy xem phần các biểu tượng hiện tại đã sẵn sàng chưa? để tìm hiểu thêm.

Hộp thoại "Chỉ hiện khu vực an toàn tối thiểu cho các biểu tượng có thể che giấu" hộp đánh dấu

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 kỳ 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   Thêm > 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.