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 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 tại 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 dùng để ẩn URL dữ liệu và URL tiện ích hoặc chỉ cho thấy cookie và yêu cầu bị chặn, cùng với các yêu cầu của bên thứ ba. Cả hai trình đơn đều hỗ trợ tính năng chọn nhiều mục.

Để thanh bộ lọc cũ xuất hiện trở lại ngay lập tức, hãy tắt phần 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.

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

Vui lòng để lại phản hồi của bạn về tính năng này trên crbug.com/1500573.

Vấn đề với Chromium: 1486431.

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

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

Bảng điều khiển Phần tử hiện hỗ trợ quy tắc CSS @font-palette-values. Thao tác 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 mục 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 cho @font-palette-values để bạn có thể chỉnh sửa các giá trị tuỳ chỉnh.

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

Sự cố Chromium: 1501781.

Trường hợp được hỗ trợ: Thuộc tính tuỳ chỉnh làm thuộc tính dự phòng của một thuộc tính tuỳ chỉnh khác

Phần tử > Kiểu hiện sẽ 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 tài sản tuỳ chỉnh dưới dạng trường hợp dự phòng cho một tài sản tuỳ chỉnh khác.

Vấn đề với Chromium: 1499265.

Cải thiện tính năng hỗ trợ bản đồ nguồn

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 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, rút gọn hoặc biên dịch mã. Thử nghiệm này cho phép bạn đánh giá tên biến gốc 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à các đề xuất tự động hoàn thành
Biểu thức trực tiếp
Biểu thức xem
Đ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 phần RFC tương ứng.

Vấn đề với Chromium: 1444349.

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

Theo dõi Lượt tương tác nâng cao

Phần Hiệu suất > Tương tác có các biểu tượng râu cho biết độ trễ đầu vào 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 Lượt tương tác.

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

Sự cố Chromium: 1495751.

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 để 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 cả 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ẻ Dưới cùng. Trước đây, bộ lọc này khớp với mọi nút.

Vấn đề với 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 điều khiển Sources (Nguồn) sẽ đánh dấu các khối mã được thụt lề bằng các đường dọc để thuận tiện cho bạn.

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

Vấn đề với Chromium: 1479986.

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

Giờ đây, bảng Mạng sẽ hiển thị chú giải công cụ khi bạn di chuột qua biểu tượng dấu chấm màu tím bên cạnh các thẻ Tiêu đề và Phản hồi của yêu cầu. 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ú giải công cụ mới bên cạnh biểu tượng dấu chấm màu tím trong thẻ Tiêu đề và Phản hồi.

Vấn đề với Chromium: 1469776.

Lúc này, bạn có thể nhập các lệnh để thêm hoặc xoá 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 lệnh mới để thêm hoặc xoá các mẫu chặn mạng.

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

Thử nghiệm về lỗi vi phạm CSP sẽ bị xoá

Thẻ Lỗi vi phạm CSP thử nghiệm được giới thiệu trong phiên bản 89 đã bị xoá vì lý do dư thừ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 Application (Ứng dụng).

Ngoài ra, bảng 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.

Chính sách bảo mật nội dung trong bảng điều khiển Application (Ứ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.

Sự cố Chromium: 772558.

Hỗ trợ tiếp cận

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

Trong Mạng > Tải trọng, giờ đây, bạn có thể tập trung vào các nút xem nguồn và xem URL được mã hoá bằng cách 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, để giảm nhầm lẫn, các đường liên kết dẫn đến tập lệnh không còn hiển thị với Trình gỡ lỗi sẽ chuyển sang màu xám và không thể nhấp vào được.
Trong các 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ó phần tử con.

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

Thông tin nổi bật khác

Dưới đây là một số bản 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 ghi không thành công thì giờ đây, bạn sẽ có thể Tải sự kiện theo dõi thô xuống để tìm hiểu xem đã xảy ra lỗi gì (cam kết).
Phím tắt Hiển thị bảng điều khiển (Ctrl+` cho 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 việc báo cáo tài nguyên CSS và vấn đề liên quan (1420362).
Phần tử:
- Khắc phục lỗi 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 kết xuất (1499882).
- Tìm kiếm. Khắc phục lỗi ngăn việc tính toán số lượng kết quả trùng khớp cho các truy vấn ngắn gồm một hoặc hai ký tự (1416457).
Bảng điều khiển. Giờ đây, 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 một ký tự thoát trong hộp Filter (Bộ lọc) (1346936).
Cài đặt > Không gian làm việc. Sửa lỗi ngăn việc thêm thư mục bị loại trừ (1503580).
Mạng > Xem trước. Nay hiển thị hình ảnh bằng các URI data: (1381791).
Bộ nhớ. Thêm nút tải lên và tải xuống phù hợp vào thanh thao tác (1275407).

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