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

Kayce Basques
Kayce Basques
X GitHub

Mô phỏng khiếm khuyết thị giác

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

Mô phỏng chứng mờ mắt.

Mô phỏng chứng mờ mắt.

Công cụ cho nhà phát triển có thể mô phỏng tình trạng mờ mắt 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ỳ ánh sáng đỏ nào.
  • Mù màu xanh lục: không thể nhận biết bất kỳ ánh sáng màu xanh lục nào.
  • Tritanopia: không có khả năng cảm nhận bất kỳ ánh sáng xanh dương nào.
  • Mù màu hoàn toàn: không thể nhận biết bất kỳ màu nào ngoại trừ các sắc độ của màu xám (cực kỳ hiếm gặp).

Ngoài ra, còn có những dạng ít nghiêm trọng hơn của các hội chứng mù 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 đỏ (khác với mù màu đỏ, tức là hoàn toàn không thể nhận biết ánh sáng đỏ). Tuy nhiên, những khiếm khuyết thị lực "-omaly" này không được xác định rõ ràng: mỗi người có khiếm khuyết thị lực như vậy đều khác nhau và có thể nhìn thấy mọi thứ khác nhau (có thể cảm nhận được nhiều/ít màu sắc có liên quan).

Bằng cách thiết kế cho các mô phỏng khắc nghiệt hơn trong Công cụ cho nhà phát triển, các ứng dụng web của bạn chắc chắn sẽ có thể truy cập được đối với những người mắc chứng mù màu đỏ, mù màu xanh lục, mù màu xanh dương và mù màu hoàn toàn.

Gửi ý kiến phản hồi đến vấn đề số 1003700 của Chromium hoặc đọc thêm về cách 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 đặt vị trí trong phần Cảm biến > Vị trí. Mở Trình đơn Lệnh rồi nhập Sensors để truy cập vào thẻ Cảm biến. Sau khi bạn thực hiện các thao tác này, Công cụ cho nhà phát triển sẽ sửa đổi ngôn ngữ mặc định hiện tại, ảnh hưởng đến những nội dung sau:

  • Các API Intl.*, ví dụ: new Intl.NumberFormat().resolvedOptions().locale
  • các API JavaScript khác có nhận biết ngôn ngữ như String.prototype.localeCompare và *.prototype.toLocaleString, ví dụ: 123_456..toLocaleString()
  • Các API DOM như navigator.language và navigator.languages
  • tiêu đề 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 dùng thử.

Gửi ý kiến phản hồi đến vấn đề số 1051822 của Chromium.

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

Giờ đây, bảng điều khiển Mạng cung cấp thông tin gỡ lỗi Chính sách đối với trình nhúng trên nhiều nguồn gốc.

Giờ đây, cột Trạng thái cung cấp thông tin giải thích nhanh về lý do yêu cầu bị chặn, cũng như đường liên kết để 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

Mục Response Headers (Tiêu đề phản hồi) của thẻ Headers (Tiêu đề) cung cấp thêm hướng dẫn về cách giải quyết các 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 đến vấn đề số 1051466 của Chromium.

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

Bảng 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 ghi nhật ký:

  • Điểm ngắt Điểm chuyển đổi được biểu thị bằng các vòng tròn màu đỏ.
  • Điểm ngắt có điều kiện Điểm ngắt có điều kiện được biểu thị bằng các vòng tròn nửa đỏ nửa trắng.
  • Logpoint Điểm ghi nhật ký được biểu thị bằng các vòng tròn màu đỏ có biểu tượng Bảng điều khiển.

Động lực để tạo ra 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 có điểm ngắt màu đỏ) và giúp người dùng dễ dàng phân biệt 3 tính năng này trong nháy mắt.

Gửi ý kiến phản hồi đến vấn đề số 1041830 của Chromium.

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

Hãy xem phần Lọc yêu cầu theo thuộc tính để khám phá thêm các từ khoá đặc biệt như cookie-path.

Di chuyển sang trái trong Trình đơn lệnh

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 hiển thị.

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

Gửi ý kiến phản hồi đến vấn đề 1011679 của Chromium.

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 lựa chọn mở Cài đặt trong Trình đơn chính ở mục Công cụ khác.

"Trình đơn chính" mở ra với "Công cụ khác" được tập trung vào "Cài đặt"

Gửi ý kiến phản hồi đến vấn đề số 1050855 của Chromium.

Bảng Kiểm tra hiện là bảng Lighthouse

Các nhóm Công cụ cho nhà phát triển và Lighthouse thường nhận được ý kiến phản hồi từ các nhà phát triển web rằng họ có thể chạy Lighthouse từ Công cụ cho nhà phát triển, nhưng khi họ thử thì không tìm thấy bảng điều khiển "Lighthouse". Vì vậy, bảng điều khiển Kiểm tra hiện là bảng điều khiển Lighthouse.

Bảng điều khiển Lighthouse

Xoá tất cả các Local Overrides (Chế độ ghi đè cục bộ) trong một thư mục

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

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

Gửi ý kiến phản hồi đến vấn đề số 1016501 của Chromium.

Cập nhật giao diện người dùng cho tác vụ dài

Thao tác dài là mã JavaScript chiếm dụng luồng chính trong một thời gian dài, khiến trang web bị treo.

Bạn đã có thể hình dung các Tác vụ dài trong bảng điều khiển Hiệu suất một thời gian, nhưng trong Chrome 83, giao diện người dùng trực quan hoá Tác vụ dài trong bảng điều khiển Hiệu suất đã được cập nhật. Phần Long Task (Tác vụ dài) của một tác vụ hiện có màu nền sọc đỏ.

Giao diện người dùng mới của Long Task

Gửi ý kiến phản hồi đến vấn đề số 1054447 của Chromium.

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

Android Oreo giới thiệu biểu tượng thích ứng, giúp hiển thị biểu tượng ứng dụng theo nhiều hình dạng trên các mẫu thiết bị khác nhau. Biểu tượng có thể che phủ là một định dạng biểu tượng mới hỗ trợ biểu tượng thích ứng, cho phép bạn đảm bảo biểu tượng PWA của bạn trông đẹp mắt trên các thiết bị hỗ trợ tiêu chuẩn biểu tượng có thể che phủ.

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

Hộp đánh dấu "Chỉ hiển thị khu vực an toàn tối thiểu cho các biểu tượng che mờ được"

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.