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 đượ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 yêu cầu dễ dàng hơn và sắp xếp gọn gàng 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 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à một trình đơn để ẩn dữ liệu và URL của phần mở rộng hoặc chỉ hiển thị các cookie và yêu cầu bị chặn cũng như 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.

Để khôi phục thanh bộ lọc cũ 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 đơn giản hoá thanh bộ lọc trong bảng điều khiển Mạng.

Vui lòng để lạ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 tiến 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 tại @font-palette-values CSS. 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. DevTools sẽ đưa bạn đến phần chuyên dụng @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 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 sẽ phân giải một thuộc tính tuỳ chỉnh là phương án 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 thuộc tính dự phòng của 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

Theo mặc định, Settings (Cài đặt) > Experiments (Thử nghiệm) > Resolve variable names in expressions using source maps (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.

Công cụ 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 ban đầu một cách nhất quán trên DevTools, 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 tiến bảng điều khiển Hiệu suất

Kênh Lượt tương tác nâng cao

Đường dẫn Hiệu suất > Số lượt tương tác sẽ nhận được các whiskers cho biết độ trễ đầu vào và trình bày tại các ranh giới thời gian xử lý.

Trước và sau khi thêm whiskers vào kênh 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 về thời gian.

Vấn đề về Chromium: 1495751.

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

Các thẻ Dưới lên, Cây lệnh 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:

  • 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ữ 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 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

Trình chỉnh sửa trong bảng điều khiển Nguồn hiện đá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ã được thụt lề bằng các đường dọc.

Vấn đề về Chromium: 1479986.

Chú giải công cụ 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ú 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 thẻ Tiêu đề và Phản hồi của một 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ề Chromium: 1469776.

Các tuỳ chọn mới trong Trình đơn lệnh để thêm và xoá 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 kết nối mạng vào Command Menu (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 cần mở bảng điều khiển Chặn yêu cầu kết nối mạng.

Xoá thử nghiệm về lỗi vi phạm CSP

Thẻ Lỗi vi phạm CSP thử nghiệm được giới thiệu trong phiên bản 89 đã bị xoá do không còn 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) > Content Security Policy (CSP) (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 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. Trong số những thay đổi đáng chú ý là khả năng chạy báo cáo về trang 404.

Để tìm hiểu kiến thức 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ề hỗ trợ tiếp cận sau:

  • Trong Network (Mạng) > Payload (Gói dữ liệu), giờ đây, bạn có thể đặt tiêu điểm bằng phím tab vào các nút view source (xem nguồn) và view URL-encoded (xem URL đã mã hoá) rồi nhấn Enter hoặc Space để kích hoạt hành động tương ứng.
  • Trong Console, để giảm sự nhầm lẫn, các đườ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 có màu xám và không thể nhấp vào.
  • Trong cây điều hướng, chẳng hạn như cây trong Sources (Nguồn) > Page (Trang), phím Enter hiện mở rộng và thu gọn các nút có phần tử con.

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

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

Sau đây là một số điểm 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 được, bạn hiện có thể Tải các sự kiện theo dõi thô xuống và cố gắng tìm hiểu nguyên nhân (commit).
  • Phím tắt Show Console (Hiển thị bảng điều khiển) (Ctrl+` đối với máy Mac, Ctrl++ đối với Windows và Linux) hiện không chỉ mở Console (Bảng điều khiển) mà còn đóng khi 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à các vấn đề của tài nguyên đó (1420362).
  • Thành phần:
    • 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 hiển thị các giá trị mặc định (1499882).
    • Tìm kiếm. Khắc phục lỗi ngăn tính số lượng kết quả trùng khớp cho các cụm từ tìm kiếm ngắn gồm một hoặc hai ký tự (1416457).
  • Console. 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 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 thư mục bị loại trừ (1503580).
  • Mạng > Xem trước. Hiện hiển thị hình ảnh bằng 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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.