Trang này được dịch bởi Cloud Translation API.

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

Sofia Emelianova

Thanh bộ lọc được tinh giản trong bảng điều khiển Mạng

Thanh bộ lọc được thiết kế lại để cho phép bạn lọc các yêu cầu dễ dàng hơn và sắp xếp gọn gàng bảng Mạng.

Thử nghiệm tương ứng được bật theo mặc định trong phiên bản này nhưng sẽ bị huỷ bỏ. Bạn có thể theo dõi tiến trình trong crbug.com/1523150.

Thanh bộ lọc mới có hai trình đơn thả xuống: một trình đơn để chọn loại yêu cầu và trình đơn còn lại để ẩn dữ liệu và URL tiện ích, hoặc chỉ hiện cookie và yêu cầu bị chặn, cùng với yêu cầu của bên thứ ba. Cả hai trình đơn đều hỗ trợ chọn nhiều mục.

Để khôi phục thanh bộ lọc cũ ngay lập tức, hãy tắt cài đặt Cài đặt > Thử nghiệm > check_box_outline_blank Thiết kế lại thanh bộ lọc trong bảng điều khiển Mạng.

Thanh bộ lọc trước và sau khi tinh giản trong bảng điều khiển Mạng.

Hãy để lại ý kiến phản hồi về tính năng này trên trang crbug.com/1500573.

Vấn đề về Chromium: 1486431.

Các điểm cải tiến về thành phần

Hỗ trợ của `@font-palette-values`

Bảng điều khiển Phần tử hiện hỗ trợ CSS @font-palette-values tại quy tắc CSS. Bảng này cho phép bạn tuỳ chỉnh các giá trị mặc định của thuộc tính font-palette.

Trong Kiểu, hãy nhấp vào giá trị của thuộc tính font-palette và Công cụ cho nhà phát triển sẽ đưa bạn đến phần dành riêng @font-palette-values nơi bạn có thể chỉnh sửa các giá trị tuỳ chỉnh của mình.

Mục @font-palette-values trong Kiểu.

Vấn đề về Chromium: 1501781.

Trường hợp được hỗ trợ: Thuộc tính tuỳ chỉnh dưới dạng phiên bản dự phòng của một thuộc tính tuỳ chỉnh khác

Phần tử > Kiểu hiện phân giải một thuộc tính tuỳ chỉnh là dự phòng của một thuộc tính tuỳ chỉnh khác.

Trước và sau khi phân giải một thuộc tính tuỳ chỉnh dưới dạng bản dự phòng cho một thuộc tính tuỳ chỉnh khác.

Vấn đề về Chromium: 1499265.

Cải thiện khả năng hỗ trợ của bản đồ nguồn

Chế độ cài đặt Cài đặt > Thử nghiệm > check_box Giải quyết tên biến trong biểu thức bằng cách sử dụng bản đồ nguồn được bật theo mặc định.

Công cụ cho nhà phát triển sử dụng bản đồ nguồn để cho phép bạn gỡ lỗi mã gốc trong Nguồn và Phạm vi ngay cả sau khi bạn kết hợp, giảm kích thước hoặc biên dịch mã. Thử nghiệm này cho phép bạn đánh giá tên biến ban đầu một cách nhất quán trên Công cụ cho nhà phát triển, bao gồm nhưng không giới hạn ở:

Biểu thức trong Bảng điều khiển và nội dung đề xuất tự động hoàn thành
Biểu thức trực tiếp
Biểu thức theo dõi
Điểm ngắt có điều kiện và điểm ghi nhật ký

Để biết thêm thông tin chi tiết, hãy xem tài liệu RFC tương ứng.

Vấn đề về Chromium: 1444349.

Các điểm cải tiến về bảng điều khiển hiệu suất

Kênh theo dõi Lượt tương tác nâng cao

Kênh Performance (Hiệu suất) > Interactions (Tương tác) có các râu cho biết độ trễ khi nhập và trình bày tại ranh giới thời gian xử lý.

Trước và sau khi thêm râu vào kênh Tương tác.

Ngoài ra, khi di chuột lên một lượt tương tác, bạn có thể thấy phần chú thích hữu ích nêu chi tiết thời gian tương ứng.

Vấn đề về Chromium: 1495751.

Tính năng lọc nâng cao trong các thẻ Từ dưới lên, Cây cuộc gọi và Nhật ký sự kiện

Các thẻ Từ dưới lên, Cây cuộc gọi và Nhật ký sự kiện trong bảng điều khiển Hiệu suất có 3 nút mới để dùng tính năng lọc nâng cao:

match_case Khớp chữ hoa/chữ thường.
regular_expression Biểu thức chính quy.
match_word Khớp toàn bộ từ.

Ba nút mới để lọc nâng cao.

Ngoài ra, để giúp bạn giữ lại ngữ cảnh, giờ đây, chỉ các mục cấp cao nhất mới khớp với bộ lọc trong thẻ Từ dưới lên. Trước đây, bộ lọc khớp với mọi nút.

Vấn đề về Chromium: 1496355.

Điểm đánh dấu thụt lề trong bảng điều khiển Nguồn

Giờ đây, Editor (Trình chỉnh sửa) trong bảng Sources (Nguồn) sẽ đánh dấu các khối mã đã thụt lề bằng các đường dọc để thuận tiện cho bạn.

Phần trước và sau khi đánh dấu khối mã đã thụt lề bằng các đường dọc.

Vấn đề về Chromium: 1479986.

Chú thích hữu ích cho tiêu đề và nội dung bị ghi đè trong bảng điều khiển Mạng

Giờ đây, bảng điều khiển Network (Mạng) sẽ hiển thị chú thích khi bạn di chuột qua biểu tượng dấu chấm màu tím bên cạnh thẻ Headers (Tiêu đề) và Response (Phản hồi) của yêu cầu. Các chú giải công cụ cho bạn biết nội dung nào đã bị Công cụ cho nhà phát triển ghi đè.

Chú thích mới bên cạnh biểu tượng dấu chấm màu tím trong các thẻ Tiêu đề và Phản hồi.

Vấn đề về Chromium: 1469776.

Giờ đây, bạn có thể nhập các lệnh để thêm hoặc xoá các mẫu chặn yêu cầu kết nối mạng vào Trình đơn lệnh.

Trước và sau khi thêm các lệnh mới để thêm hoặc xoá mẫu chặn mạng.

Lệnh Add (Thêm) sẽ đưa bạn đến hộp thoại để chỉ định mẫu và lệnh Remove (Xoá) sẽ xoá tất cả các mẫu mà không cần mở bảng điều khiển Network request blocked (Chặn yêu cầu mạng).

Thử nghiệm các lỗi vi phạm Chính sách bảo mật nội dung (CSP) đã bị xoá

Thẻ Các lỗi vi phạm CSP thử nghiệm ra mắt trong phiên bản 89 đã không còn được dùng nữa.

Để xem nhanh thông tin chi tiết về CSP, hãy chuyển đến Ứng dụng > Khung > Chính sách bảo mật nội dung (CSP).

Chính sách bảo mật nội dung trong bảng điều khiển Ứng dụng.

Ngoài ra, bảng điều khiển Vấn đề sẽ báo cáo các lỗi vi phạm Chính sách bảo mật nội dung (CSP).

Chính sách bảo mật nội dung trong bảng điều khiển Ứng dụng.

Lighthouse 11.3.0

Bảng điều khiển Lighthouse hiện đã chạy Lighthouse 11.3.0. Xem danh sách đầy đủ các thay đổi. Một trong những thay đổi đáng chú ý là khả năng chạy báo cáo trên các trang 404.

Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Hỗ trợ tiếp cận

Phiên bản này có các điểm cải tiến về khả năng hỗ trợ tiếp cận như sau:

Trong Mạng > Tải trọng, giờ đây, bạn có thể lấy tiêu điểm là thẻ xem nguồn và nút xem URL được mã hoá, rồi nhấn phím Enter hoặc Phím cách để kích hoạt hành động tương ứng.
Trong Bảng điều khiển, để tránh nhầm lẫn, các đường liên kết dẫn đến các tập lệnh không còn khả dụng trong Trình gỡ lỗi sẽ chuyển sang màu xám và không thể nhấp vào được.
Trong cây điều hướng, chẳng hạn như cây trong Nguồn > Trang, giờ đây phím Enter sẽ mở rộng và thu gọn các nút có nút con.

Vấn đề về Chromium: 1338391, 1500662, 1420362.

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

Hiệu suất. Nếu không ghi lại được, thì giờ đây bạn có thể chọn Tải sự kiện theo dõi thô xuống và cố gắng tìm hiểu xem đã xảy ra lỗi gì (cam kết).
Phím tắt Show Console (Hiển thị bảng điều khiển) (Ctrl+` cho máy Mac, Ctrl++ cho Windows và Linux) giờ đây không chỉ mở Bảng điều khiển mà còn đóng khi được nhấn lần thứ hai.
Tài nguyên dành cho nhà phát triển. Khắc phục lỗi ngăn báo cáo các tài nguyên CSS và các vấn đề của các tài nguyên đó (1420362).
Phần tử:
- Khắc phục lỗi khi kiểm tra các phần tử trong iframe (1453375).
- Đã tính toán. Khắc phục lỗi ngăn các giá trị mặc định hiển thị (1499882).
- Tìm kiếm. Khắc phục lỗi làm cho không thể tính số kết quả trùng khớp cho các truy vấn ngắn có một hoặc hai ký tự (1416457).
Bảng điều khiển. Giờ đây, bạn có thể phân tích cú pháp chính xác các biểu thức chính quy kết thúc bằng ký tự thoát trong hộp Filter (Bộ lọc) (1346936).
Cài đặt > Không gian làm việc. Khắc phục lỗi ngăn việc thêm thư mục bị loại trừ (1503580).
Mạng > Xem trước. Hiện hình ảnh hiển thị bằng URI data: (1381791).
Bộ nhớ. Thêm các nút tải tải lên phù hợp và tải xuống lưu vào thanh thao tác (1275407).

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 > 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.