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

Bằng cách thiết kế cho 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 đảm bảo cũng có thể truy cập được với những người mắc chứng mù màu đỏ nhẹ, mù màu xanh lục nhẹ, mù màu đỏ nhẹ và mù màu đỏ bất thường.

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ở 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 những 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 nhận biết ngôn ngữ khác 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.

Cột Trạng thái hiện cung cấp nội dung giải thích nhanh về lý do khiến 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 đó để 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 của 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 là màu đỏ cho điểm ngắt) và giúp dễ dàng phân biệt 3 tính năng ngay lập tức.

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 mạng đặt 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ở ra, trong đó "Công cụ khác" tập trung vào phần "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 được phản hồi từ các nhà phát triển web rằng họ sẽ nghe được thông tin rằng có thể chạy Lighthouse trong Công cụ cho nhà phát triển. Tuy nhiên, khi dùng thử, họ không tìm thấy bảng điều khiển "Lighthouse", vì vậy, bảng điều khiển Audits (Kiểm tra) nay 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 Cơ chế ghi đè cục bộ, bạn có thể nhấp chuột phải vào một thư mục rồi chọn tuỳ chọn mới Xoá tất cả cơ chế ghi đè để xoá tất cả 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 thời gian dài, khiến trang web bị treo.

Trước đây, bạn đã có thể hình ảnh hoá các Nhiệm vụ dài trong bảng Hiệu suất, nhưng trong Chrome 83, giao diện người dùng trực quan hoá Tác vụ dài trong bảng Hiệu suất đã được cập nhật. Phần Nhiệm vụ dài hạn của một nhiệm vụ hiện được tô màu bằng 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 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 đã giới thiệu các biểu tượng thích ứng, hiển thị biểu tượng ứng dụng dưới nhiều hình dạng trên nhiều mẫu thiết bị. 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, cho phép bạn đảm bảo biểu tượng PWA của mình trông ổn trên những thiết bị hỗ trợ tiêu chuẩn biểu tượng có thể che khuất.

Bật hộp đánh dấu 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 ngăn Tệp kê khai để kiểm tra nhằm đảm bảo biểu tượng có thể che phủ có giao diện đẹp mắt trên thiết bị Android Oreo. Hãy xem phần 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ị vùng an toàn tối thiểu cho các biểu tượng có thể che giấ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 cứ 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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59