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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Thanh bộ lọc được thiết kế lại để giúp bạn lọc các yêu cầu dễ dàng hơn và giảm bớt nội dung không cần thiết trong bảng điều khiển 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ẽ được khôi phục. 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à một trình đơn khác để ẩn dữ liệu và URL của tiện ích hoặc chỉ hiện các cookie và yêu cầu bị chặn, cũng như các yêu cầu của bên thứ ba. Cả hai trình đơn này đều hỗ trợ chế độ chọn nhiều.

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

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

Bạn có thể gửi ý kiến phản hồi về tính năng này tại crbug.com/1500573.

Vấn đề về Chromium: 1486431.

Cải thiện các phần tử

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

Giờ đây, bảng điều khiển Elements (Phần tử) hỗ trợ quy tắc @ trong CSS @font-palette-values. Thuộc tính 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à DevTools sẽ đưa bạn đến mục dành riêng cho @font-palette-values, nơi bạn có thể chỉnh sửa các giá trị tuỳ chỉnh.

Phần @font-palette-values trong Styles (Kiểu).

Vấn đề về 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

Elements (Phần tử) > Styles (Kiểu) hiện giải quyết một thuộc tính tuỳ chỉnh là giải pháp 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 làm 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ợ bản đồ nguồn

Cài đặt > Thử nghiệm > 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.

DevTools 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 thiểu hoặc biên dịch mã đó. Thử nghiệm này cho phép bạn đánh giá nhất quán tên biến ban đầu trên Công cụ cho nhà phát triển, bao gồm nhưng không giới hạn ở:

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

Vấn đề về Chromium: 1444349.

Cải thiện bảng điều khiển Hiệu suất

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

Đường theo dõi Hiệu suất > Tương tác có các đường đánh dấu cho biết độ trễ đầu vào và độ trễ trình bày tại các ranh giới thời gian xử lý.

Hình ảnh trước và sau khi thêm râu vào bản nhạc 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 chú giải công cụ hữu ích nêu chi tiết thời gian.

Vấn đề về Chromium: 1495751.

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

Các thẻ Bottom-Up (Từ dưới lên), Call Tree (Cây lệnh gọi) và Event Log (Nhật ký sự kiện) trong bảng Performance (Hiệu suất) có 3 nút mới để lọc nâng cao:

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

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

Ngoài ra, để giúp bạn giữ được bối cảnh, giờ đây, chỉ những 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 này khớp với mọi nút.

Vấn đề về Chromium: 1496355.

Dấu thụt lề trong bảng điều khiển Nguồn

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

Đoạn mã được thụt lề trước và sau khi đánh dấu bằng các đường thẳng đứng.

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 Mạng sẽ hiển thị chú thích khi bạn di chuột lên 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 một yêu cầu. Chú thích 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 thẻ Tiêu đề và Phản hồi.

Vấn đề về Chromium: 1469776.

Các lựa chọn mới trong Trình đơn lệnh để thêm và xoá các mẫu chặn yêu cầu

Giờ đây, bạn có thể nhập các lệnh để thêm hoặc xoá mẫu chặn yêu cầu mạng trong 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 Thêm sẽ đưa bạn đến hộp thoại để chỉ định mẫu và lệnh Xoá sẽ xoá tất cả mẫu mà không mở bảng Chặn yêu cầu kết nối mạng.

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

Thẻ Vi phạm CSP thử nghiệm được giới thiệu trong phiên bản 89 đã bị xoá vì không cần thiết.

Để xem nhanh thông tin chi tiết về CSP, hãy chuyển đến Application (Ứng dụng) > Frames (Khung hình) > Content Security Policy (CSP) (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 Ứ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 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 Lighthouse hiện chạy Lighthouse 11.3.0. Xem danh sách đầy đủ các thay đổi. Trong số những thay đổi đáng chú ý, có khả năng chạy báo cáo về các trang lỗi 404.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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ó những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

  • Trong Mạng > Tải trọng, giờ đây, bạn có thể dùng phím tab để chuyển tiêu điểm đến các nút xem nguồn và xem URL được mã hoá, đồng thời nhấn phím Enter hoặc Phím cách để kích hoạt thao tác tương ứng.
  • Trong Console (Bảng điều khiển), để giảm nhầm lẫn, những đường liên kết dẫn đến các tập lệnh không còn dùng được cho Trình gỡ lỗi hiện đã chuyển sang màu xám và không thể nhấp vào.
  • 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ó nút con.

Các vấn đề về Chromium: 1338391, 1500662, 1420362.

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

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

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

Tải các 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 cho phép bạn truy cập vào các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật hoặc bất kỳ nội dung nào khác liên quan đến 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.