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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Di chuyển và ẩn các bản nhạc bằng chế độ cấu hình bản nhạc mới cập nhật

Giờ đây, bạn có thể chuyển sang chế độ định cấu hình kênh bằng cách nhấp chuột phải vào tên kênh rồi chọn Định cấu hình kênh. Nút chỉnh sửa yêu cầu thêm không gian đã bị xoá.

Trước và sau khi thay thế nút chỉnh sửa bằng một tuỳ chọn trình đơn.

Chế độ cấu hình kênh cho phép bạn thay đổi thứ tự của các kênh và ẩn các kênh đó. Nhấp vào biểu tượng mũi tên lên hoặc mũi tên xuống để di chuyển bản nhạc hoặc nhấp vào biểu tượng ẩn. Để thoát khỏi chế độ định cấu hình, hãy nhấp vào Hoàn tất việc định cấu hình kênh ở dưới cùng. Cấu hình này vẫn tồn tại cho các dấu vết mới nhưng không tồn tại cho các phiên DevTools tiếp theo.

Vấn đề về Chromium: 336266699.

Bỏ qua tập lệnh trong biểu đồ hình ngọn lửa

Biểu đồ hình ngọn lửa trong kênh Main (Chính) hỗ trợ thêm danh sách bỏ qua. Giờ đây, bạn có thể nhấp chuột phải vào một tập lệnh trong biểu đồ rồi chọn Thêm tập lệnh vào danh sách bỏ qua.

Tuỳ chọn trình đơn để thêm tập lệnh vào danh sách bỏ qua, các tập lệnh được đánh dấu là bị bỏ qua và các quy tắc tương ứng trong phần Cài đặt.

Biểu đồ sẽ thu gọn các tập lệnh bị bỏ qua, đánh dấu các tập lệnh đó là On ignore list (Trong danh sách bỏ qua) và thêm các tập lệnh đó vào Custom exclusion rules (Quy tắc loại trừ tuỳ chỉnh) trong phần (cài đặt) Settings (Cài đặt) > Ignore list (Danh sách bỏ qua). Các tập lệnh bị bỏ qua sẽ được lưu cho đến khi bạn xoá các tập lệnh đó khỏi dấu vết hoặc khỏi Quy tắc loại trừ tuỳ chỉnh.

Vấn đề về Chromium: 336266714.

Giảm tốc CPU xuống 20 lần

Trình đơn điều tiết CPU trong phần Cài đặt quay video của bảng điều khiển Hiệu suất có thêm tuỳ chọn Chậm 20 lần. Do đó, giờ đây, bạn có thể tái tạo và phân tích chính xác hơn các vấn đề về hiệu suất trong thực tế, ngay cả trên máy tính cao cấp.

Trước và sau khi thêm tuỳ chọn "20x slowdonw" vào "Capture settings" (Cài đặt chụp).

Vấn đề về Chromium: 324978881.

Bảng điều khiển thông tin chi tiết về hiệu suất sẽ ngừng hoạt động

Bảng điều khiển Thông tin chi tiết về hiệu suất thử nghiệm sẽ ngừng hoạt động vào năm 2024. Nhóm Công cụ cho nhà phát triển đang nỗ lực tích hợp các tính năng hữu ích nhất vào bảng điều khiển Hiệu suất. Giờ đây, bảng điều khiển Thông tin chi tiết về hiệu suất sẽ hiển thị một biểu ngữ ở đầu để thông báo cho bạn về việc ngừng sử dụng sắp tới.

Biểu ngữ cảnh báo về việc ngừng sử dụng trong bảng "Thông tin chi tiết về hiệu suất".

Để tìm hiểu thêm, hãy xem bài viết Công cụ hiệu suất trong năm 2024 trở đi.

Nếu bạn có ý kiến phản hồi về những điểm hiệu quả, những điểm chưa hiệu quả và những điểm bạn cho rằng chúng tôi có thể cải thiện, hãy cho chúng tôi biết.

Dán toàn bộ chuỗi tiêu đề để ghi đè các chuỗi đó

Khi ghi đè tiêu đề, giờ đây, bạn có thể dán toàn bộ chuỗi tiêu đề (HEADER_NAME: VALUE) và DevTools sẽ tách chuỗi tại : thành tên tiêu đề và giá trị của tiêu đề đó.

Hãy xem ví dụ thực tế trong video sau.

Khi chỉnh sửa tiêu đề, bảng điều khiển Mạng hiện sẽ cảnh báo bạn nếu bạn nhập bất kỳ ký tự nào khác ngoài chữ-số, dấu gạch nối và dấu gạch dưới.

Cảnh báo bên cạnh tên tiêu đề có các ký tự không được hỗ trợ.

Ngoài ra, các tuỳ chọn trình đơn ghi đè và nút Chỉnh sửa sẽ bị tắt đối với URL chrome://, khớp với hành vi dự kiến.

Vấn đề về Chromium: 330967147, 337012362, 328210785.

Tìm mức sử dụng bộ nhớ quá mức bằng các bộ lọc mới trong ảnh chụp nhanh vùng nhớ khối xếp

Ảnh chụp nhanh vùng nhớ khối xếp trong bảng điều khiển Bộ nhớ có các bộ lọc mới có thể giúp bạn tìm thấy các trường hợp phổ biến về việc sử dụng bộ nhớ không hiệu quả, chẳng hạn như các chuỗi trùng lặp, các đối tượng được các nút DOM đã tách giữ lại và Bảng điều khiển của Công cụ cho nhà phát triển.

Trước và sau khi thêm các tuỳ chọn bộ lọc cho các trường hợp phổ biến về việc sử dụng bộ nhớ không hiệu quả.

Vấn đề về Chromium: 337094903.

Kiểm tra các bộ chứa bộ nhớ trong phần Ứng dụng > Bộ nhớ

Giờ đây, bạn có thể kiểm tra các bộ nhớ trong một cây chuyên dụng trong phần Application (Ứng dụng) > Storage (Bộ nhớ). Cây này (trước đây là thử nghiệm) đã được bật theo mặc định.

Trước và sau khi bật cây bộ chứa bộ nhớ trong phần Bộ nhớ.

Vấn đề về Chromium: 338094915.

Tắt cảnh báo tự XSS bằng cờ dòng lệnh

Nếu tự động hoá việc sử dụng Chrome hoặc mở DevTools từ dòng lệnh để gỡ lỗi, bạn thường sẽ muốn tắt cảnh báo tự XSS xuất hiện trong mỗi phiên DevTools mới.

Hộp thoại cảnh báo tự xss trong Console.

Giờ đây, bạn có thể tắt hộp thoại này bằng cách truyền cờ dòng lệnh --unsafely-disable-devtools-self-xss-warnings vào Chrome.

Vấn đề về Chromium: 41491762.

Lighthouse 12.0.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 12.0.0.

Bản cập nhật này có một số thay đổi, bao gồm việc xoá danh mục PWA, sắp xếp lại danh mục SEO, ngừng sử dụng chỉ số Tiết kiệm tổng thể, các quy trình kiểm tra mới và thay đổi về quy trình kiểm tra. Xem danh sách đầy đủ các thay đổi.

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

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:
    • Giờ đây, các chế độ cài đặt chụp chậm (Bật khả năng đo lường bản vẽ nâng cao và Bật số liệu thống kê của bộ chọn CSS) sẽ tự động xoá trong phiên DevTools tiếp theo.
    • Thẻ Số liệu thống kê về bộ chọn hiện không tự động cuộn xuống dưới cùng khi bạn thu phóng biểu đồ hình ngọn lửa và dữ liệu thay đổi (337999939).
  • Console: Giờ đây, phím tắt Ctrl+` chỉ đóng Console trong ngăn nếu ngăn đó đang được lấy tiêu điểm (40875466, 328210785).
  • Tự động điền: Khắc phục lỗi phân tích cú pháp địa chỉ (335409093, 335409707).
  • Hỗ trợ tiếp cận: Khắc phục thông báo của trình đọc màn hình cho các chuỗi đã bản địa hoá (324930007).

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.