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ị giác

Mở thẻ Kết xuất và sử dụng tính năng mới Mô phỏng các khiếm khuyết về thị giác để hiểu rõ hơn về cách những người mắc các loại khiếm khuyết về thị giác 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.

DevTools có thể mô phỏng tình trạng nhìn mờ và các loại khiếm khuyết về thị giác màu sau:

  • Mù màu đỏ: không thể nhận biết bất kỳ ánh sáng màu đỏ 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.
  • Mù màu xanh dương: không thể nhận biết bất kỳ ánh sáng màu xanh dương nào.
  • Mù màu: không thể nhận biết bất kỳ màu nào ngoại trừ các sắc thái màu xám (rất hiếm).

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

Bằng cách thiết kế cho các mô phỏng cực đoan hơn trong DevTools, ứng dụng web của bạn cũng được đảm bảo là có thể truy cập được cho những người mắc chứng protanomaly, deuteranomaly, tritanomaly và achromatomaly.

Gửi ý kiến phản hồi về vấn đề #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 thực hiện các thao tác này, DevTools sẽ sửa đổi ngôn ngữ mặc định hiện tại, ảnh hưởng đến những nội dung sau:

  • API Intl.*, ví dụ: new Intl.NumberFormat().resolvedOptions().locale
  • các API JavaScript khác có thể nhận biết ngôn ngữ như String.prototype.localeCompare và *.prototype.toLocaleString, ví dụ: 123_456..toLocaleString()
  • 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 về vấn đề #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)

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

Cột Trạng thái hiện cung cấp nội dung giải thích nhanh về lý do một yêu cầu bị chặn, cũng như một đườ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

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 các vấn đề:

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

Gửi ý kiến phản hồi về vấn đề #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 đ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 ghi nhật ký:

Động lực cho các biểu tượng mới là để 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 các điểm ngắt màu đỏ) và giúp dễ dàng phân biệt giữa 3 tính năng này khi xem nhanh.

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

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 mạng đặt một đường dẫn cookie cụ thể.

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

Dock to left (Gắn vào bên trái) trong Trình đơn lệnh

Mở Command Menu (Trình đơn lệnh) rồi chạy lệnh Dock to left để di chuyển DevTools sang bên trái của khung nhìn.

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

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

Tuỳ chọn Settings trong Trình đơn chính đã di chuyển

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

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

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

Bảng điều khiển Kiểm tra hiện là bảng điều khiển Lighthouse

Các nhóm DevTools và Lighthouse thường xuyên 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ừ DevTools, nhưng khi thử, họ 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ơ 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 tuỳ chọn Delete all overrides (Xoá tất cả các chế độ ghi đè) mới để xoá tất cả các chế độ Ghi đè cục bộ trong thư mục đó.

Xoá tất cả cơ chế ghi đè

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

Cập nhật giao diện người dùng cho 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, khiến trang web bị treo.

Bạn đã có thể hình dung Tác vụ dài trong bảng điều khiển Hiệu suất được một thời gian, nhưng trong Chrome 83, giao diện người dùng trực quan của Tác vụ dài trong bảng điều khiển Hiệu suất đã được cập nhật. Phần Tác vụ dài của một tác vụ hiện được tô màu nền màu đỏ 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 về vấn đề #1054447 của Chromium.

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

Android Oreo đã giới thiệu biểu tượng thích ứng, hiển thị biểu tượng ứng dụng ở 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 là một đị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 rằng biểu tượng PWA của mình trông đẹp trên các thiết bị hỗ trợ tiêu chuẩn biểu tượng có thể che.

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 Tệp kê khai để kiểm tra xem biểu tượng che mờ được của bạn có hiển thị đẹp trên các thiết bị Android Oreo hay không. Hãy xem bài viết 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 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.

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.