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 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ới Chromium: 1163928

Các 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ụ của 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ới Chromium: 1223525

Bản dùng thử ban đầu 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 Ứ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 có hạn trước khi tính năng này được cung cấp cho 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 cuộn xuống phần Frames (Khung) rồi chọn khung trên cùng.

Bản dùng thử ban đầu trong chế độ xem Chi tiết khung

Vấn đề với Chromium: 607555

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

Huy hiệu vùng chứa mới sẽ được thêm bên cạnh các thành phần vùng chứa (các thành phần đối tượng cấp trên phù hợp với các tiêu chí của quy tắc @container). Nhấp vào huy hiệu này để 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 cháu của vùng chứa đó trên trang.

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

Vấn đề với 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 "mã trạng thái: 404" để lọc các yêu cầu mạng có trạng thái 404. Chọn hộp đánh dấu Đả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ới Chromium: 1054464

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

Thanh bên Console sẽ bị xoá và thay vào đó là di 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 thông báo cho chúng tôi 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 của bảng điều khiển

Vấn đề với Chromium: 1232937

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

Công cụ cho nhà phát triển hiện hiển thị các tiêu đề Set-Cookie thô trong thẻ Vấn đề.

Trước đây, Công cụ cho nhà phát triển không hiển thị 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 điều khiển Network (Mạng), người dùng có thể lọc phản hồi tiêu đề Set-Cookie thô. Công cụ cho nhà phát triển sẽ liên kết các tiêu đề Set-Cookie thô trong thẻ Vấn đề với bảng điều khiển Mạng.

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

Vấn đề với Chromium: 1179186

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

Giờ đây, Console (Bảng điều khiển) sẽ hiển thị một cách nhất quán các trình truy cập gốc dưới dạng tài sản riêng của chú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 hiển thị trong bản xem trước. Với bản cập nhật mới nhất này, trình truy cập gốc được hiển thị trong bản xem trước và các giá trị sẽ được đánh giá một cách thận trọng khi được mở rộng.

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

Vấn đề với 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 với #sourceURL

Công cụ cho nhà phát triển hiện giải quyết các tập lệnh cùng dòng bằng #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 có #sourceURL, so với tài liệu xung quanh thay vì tương ứng với 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 với #sourceURL

Các sự cố với 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 mọi phần tử trong ngăn Tính toán bằng cách nhấn 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ới Chromium: 1226371

Thay thế chú giải công cụ tuỳ chỉnh bằng chú giải công cụ 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 đã triển khai chú giải công cụ tuỳ chỉnh từ lâu do thiếu định kiểu của chú giải công cụ HTML gốc.

Rất tiếc, việc triển khai chú giải công cụ tuỳ chỉnh rất phức tạp và chúng tôi thường gặp lỗi phức tạp.

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

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

Vấn đề với 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 những 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 đề rồi nhấp vào trình đơn vấn đề Thêm ở bên phải, chọn Ẩn các vấn đề tương tự để ẩn vấn đề đó.

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

Vấn đề với Chromium: 1175722

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