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ẻ Hiển thị và sử dụng tính năng mới Mô phỏng khiếm khuyết về thị lực để hiểu rõ hơn về trải nghiệm trang web của những người mắc nhiều loại khuyết tật thị lực.

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

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

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

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

Tồn tại nhiều phiên bản nghiêm trọng hơn của chứng khiếm khuyết về thị giác màu sắc 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 đỏ nhẹ, tức là hoàn toàn không thể nhận biết ánh sáng đỏ). Tuy nhiên, các khiếm khuyết thị giác "bất thường" này không được xác định rõ ràng: mỗi người khiếm khuyết về 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 sắc liên quan).

Bằng cách thiết kế cho các mô phỏng cực kỳ nghiêm ngặt hơn trong Công cụ cho nhà phát triển, các ứng dụng web của bạn đảm bảo khả năng truy cập vào các ứng dụng web của những người mắc chứng mù màu đỏ nhẹ, Mù màu xanh lục nhẹ, Mù màu lam vàng nhẹ và chứng mù màu nguyên tử.

Gửi ý kiến phản hồi đến vấn đề về Chromium #1003700 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 mục 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 hành động 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 yếu tố 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 chẳng hạn 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ự thử.

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

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 theo Chính sách trình nhúng 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 một yêu cầu bị chặn, cũng như một đường liên kết để xem các 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 đề sẽ 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 đề 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 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 của các biểu tượng mới là làm cho 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ó màu đỏ cho điểm ngắt) và giúp dễ dàng phân biệt 3 tính năng này một cách nhanh chóng.

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

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

Xem mục Lọc yêu cầu theo cơ sở lưu trú để khám phá thêm các từ khoá đặc biệt như cookie-path.

Gắn sang trái từ 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ủa bạ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 tới vấn đề về 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 từ Trình đơn chính trong Công cụ khác.

"Trình đơn chính" mở ra và mục "Công cụ khác" được lấy tiêu điểm ở mục "Cài đặt"

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

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

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ọ được biết rằng có thể chạy Lighthouse từ Công cụ cho nhà phát triển, nhưng khi dùng thử, họ không thể tìm thấy bảng điều khiển "Lighthouse", vì vậy, bảng điều khiển Inspects 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 Cơ chế ghi đè cục bộ, bạn hiệ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á 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 đề Chromium #1016501.

Cập nhật giao diện người dùng của các nhiệm 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.

Tạm thời, bạn đã có thể hình ảnh hoá tác vụ dài trong bảng điều khiển Hiệu suất. Tuy nhiên, trong Chrome 83, giao diện người dùng trực quan hoá 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 Nhiệm vụ dài của một tác vụ hiện có màu nền đỏ có sọc.

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

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

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

Android Oreo đã giới thiệu các biểu tượng thích ứng, giúp hiển thị biểu tượng ứng dụng ở nhiều hình dạng trên các 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, cho phép bạn đảm bảo biểu tượng PWA hiển thị đẹp mắt trên những thiết bị hỗ trợ tiêu chuẩn biểu tượng có thể che giấu.

Bật hộp đánh dấu mới Show only the Optimize area for Maskablecó (Chỉ 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 Manifest (Tệp kê khai) để kiểm tra nhằm đảm bảo biểu tượng che giấu được của bạn sẽ trông đẹ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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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