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

Sử dụng Công cụ cho nhà phát triển bằng ngôn ngữ bạn ưu tiên

Công cụ của Chrome cho nhà phát triển hiện hỗ trợ hơn 80 ngôn ngữ, cho phép bạn làm việc bằng ngôn ngữ mình ưu tiên!

Mở phần Cài đặt, sau đó chọn ngôn ngữ bạn muốn dùng trong trình đơn thả xuống Lựa chọn ưu tiên > Ngôn ngữ rồi tải lại Công cụ cho nhà phát triển.

Lựa chọn ưu tiên" width="800" height="494">

Vấn đề về Chromium: 1163928

Thiết bị Nest Hub mới trong Danh sách thiết bị

Giờ đây, bạn có thể mô phỏng kích thước của Nest Hub và Nest Hub Max ở Chế độ thiết bị.

Nhấp vào Bật/tắt Thanh công cụ của thiết bị   Bật/tắt thanh công cụ trên thiết bị  , chọn Nest Hub hoặc Nest Hub Max trong danh sách thiết bị.

Thiết bị Nest Hub ở chế độ Thiết bị

Vấn đề về Chromium: 1223525

Bản dùng thử theo nguyên gốc trong chế độ xem chi tiết Khung

Giờ đây, bạn có thể xem thông tin về bản dùng thử theo nguyên gốc của trang web trong chế độ xem chi tiết khung trong bảng điều khiển Application (Ứng dụng).

Bản dùng thử theo nguyên gốc cho phép bạn sử dụng một tính năng mới hoặc tính năng thử nghiệm để xây dựng chức năng mà người dùng có thể dùng thử trong một khoảng thời gian giới hạn trước khi tính năng này được cung cấp cho tất cả mọi người.

Mở một trang có các bản dùng thử theo nguyên gốc (ví dụ: trang minh hoạ). Trong bảng điều khiển Application (Ứng dụng), hãy di chuyển xuống phần Frames (Khung) rồi chọn khung hình trên cùng.

Bản dùng thử theo nguyên gốc trong chế độ xem chi tiết Khung

Vấn đề về Chromium: 607555

Huy hiệu truy vấn vùng chứa CSS mới

Một huy hiệu vùng chứa mới được thêm bên cạnh các phần tử vùng chứa (các phần tử đối tượng cấp trên phù hợp với tiêu chí của quy tắc @container). Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ của vùng chứa đã chọn và tất cả các thành phần con đang truy vấn của vùng chứa đó trên trang.

Huy hiệu truy vấn vùng chứa CSS

Vấn đề về Chromium: 1146422

Hộp đánh dấu mới để đảo ngược bộ lọc mạng

Sử dụng hộp đánh dấu Đảo ngược mới để đảo ngược các bộ lọc trong bảng điều khiển Mạng.

Ví dụ: Bạn có thể nhập "status-code: 404" (mã trạng thái: 404) để lọc các yêu cầu mạng có trạng thái 404. Đánh dấu vào hộp Đảo ngược để phủ định bộ lọc (hiển thị tất cả các yêu cầu mạng không có trạng thái 404).

Đảo ngược bộ lọc mạng

Vấn đề về Chromium: 1054464

Sắp ngừng sử dụng thanh bên Console

Thanh bên Console (Bảng điều khiển) sẽ bị xoá và thay bằng việc chuyển giao diện người dùng bộ lọc sang thanh công cụ. Bạn có thắc mắc hay phản hồi nào không? Hãy cho chúng tôi biết qua công cụ theo dõi lỗi này.

Thông báo về việc ngừng sử dụng thanh bên trong bảng điều khiển

Vấn đề về Chromium: 1232937

Hiển thị tiêu đề Set-Cookie thô trong thẻ Vấn đề và bảng điều khiển Mạng

Giờ đây, Công cụ cho nhà phát triển hiển thị tiêu đề Set-Cookie thô trong thẻ Issues (Vấn đề).

Trước đây, Công cụ cho nhà phát triển không hiển thị các cookie không đúng định dạng (tiêu đề Set-Cookie không chính xác) trong bảng điều khiển Mạng. Khi thêm bộ lọc response-header-set-cookie mới vào bảng Network (Mạng), người dùng có thể lọc phản hồi thô của tiêu đề Set-Cookie. Công cụ cho nhà phát triển sẽ liên kết tiêu đề Set-Cookie thô trong thẻ Issues (Vấn đề) với bảng điều khiển Network (Mạng).

Tiêu đề thô "Set-Cookie" trong thẻ Vấn đề và bảng điều khiển Mạng

Vấn đề về Chromium: 1179186

Trình truy cập gốc hiển thị một cách nhất quán dưới dạng tài sản riêng trong Console

Bảng điều khiển hiện hiển thị một cách nhất quán các trình truy cập gốc dưới dạng thuộc tính riêng.

Ví dụ: khi đánh giá biểu thức new Int8Array([1, 2, 3]) trong Bảng điều khiển, các trình truy cập gốc như length, byteOffset không xuất hiện trong bản xem trước. Trong bản cập nhật mới nhất này, trình truy cập gốc sẽ xuất hiện trong bản xem trước và các giá trị sẽ được đánh giá nghiêm ngặt khi được mở rộng.

Trình truy cập gốc hiển thị một cách nhất quán dưới dạng tài sản riêng trong Console

Vấn đề về Chromium: 1076820, 1199247

Dấu vết ngăn xếp lỗi thích hợp cho các tập lệnh cùng dòng có #sourceURL

Công cụ cho nhà phát triển hiện phân giải các tập lệnh cùng dòng với #sourceURL đúng cách và hiển thị dấu vết ngăn xếp lỗi thích hợp để gỡ lỗi.

Trước đây, Công cụ cho nhà phát triển đã hiển thị vị trí không chính xác cho các tập lệnh cùng dòng với #sourceURL, liên quan đến tài liệu xung quanh thay vì liên quan đến thẻ <script> mở.

Dấu vết ngăn xếp lỗi thích hợp cho các tập lệnh cùng dòng có #sourceURL

Vấn đề về Chromium: 1183990, 578269

Thay đổi định dạng màu trong ngăn Đã tính toán

Giờ đây, bạn có thể thay đổi định dạng màu của bất kỳ phần tử nào trong ngăn Đã tính toán bằng cách sử dụng phím Shift + nhấp vào bản xem trước màu.

Shift+Nhấp vào bản xem trước màu để thay đổi định dạng màu

Vấn đề về Chromium: 1226371

Thay thế chú thích tuỳ chỉnh bằng chú thích HTML gốc

Công cụ cho nhà phát triển hiện sử dụng chú giải công cụ HTML gốc trên tất cả các thành phần. Công cụ cho nhà phát triển đã có phương thức triển khai chú thích tuỳ chỉnh trong một thời gian dài do thiếu kiểu của chú thích HTML gốc.

Thật không may, việc duy trì việc triển khai chú thích tuỳ chỉnh rất phức tạp và chúng tôi thường xuyên gặp phải các lỗi phức tạp.

Sau khi cân nhắc lại lợi ích của các phương pháp triển khai tuỳ chỉnh, chúng tôi nhận thấy rằng chú giải công cụ HTML gốc là đủ cho Công cụ cho nhà phát triển, đồng thời việc áp dụng các chú giải công cụ này sẽ giúp ngăn chặn nhiều vấn đề cho người dùng.

Chú giải công cụ cho nhà phát triển

Vấn đề về Chromium: 1223391

[Thử nghiệm] Ẩn vấn đề trong thẻ Vấn đề

Bật thử nghiệm ẩn trình đơn vấn đề để ẩn các vấn đề trong thẻ Vấn đề. Bằng cách này, bạn có thể tập trung vào các vấn đề quan trọng mà bạn quan tâm.

Trong thẻ Vấn đề, hãy di chuột lên một vấn đề, nhấp vào trình đơn vấn đề Thêm ở bên phải, rồi chọn Ẩn các vấn đề tương tự để ẩn vấn đề đó.

Trình đơn theo bối cảnh của vấn đề ẩn thử nghiệm

Vấn đề về Chromium: 1175722

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