Ngày phát hành: 19 tháng 3 năm 2025
Trong quá trình tiếp tục đưa tin về sáng kiến cải thiện công cụ hiệu suất của Chrome, chúng tôi rất vui mừng được thông báo thêm về các bản nâng cấp cho cách bạn có thể tương tác với bảng điều khiển Hiệu suất trong DevTools. Những điểm cải tiến này được thiết kế để giúp bạn dễ dàng điều hướng dấu vết hiệu suất và giảm thiểu thông tin không liên quan, nhờ đó bạn có thể tập trung vào việc nhanh chóng theo dõi và giải quyết các vấn đề về hiệu suất.
Cải thiện tính năng điều hướng
Chúng tôi nhận được ý kiến phản hồi của nhiều người dùng rằng việc cuộn và thu phóng trong bảng điều khiển Hiệu suất có thể không trực quan. Mặc dù nhiều người dùng lâu năm đã quen với điều này, nhưng nhiều người mong muốn cử chỉ cuộn sẽ cuộn chứ không phải phóng to và thu nhỏ dấu vết.
Một tuỳ chọn mới trong phần (trợ giúp) cho phép chuyển đổi giữa chế độ cuộn "Cổ điển" hiện có và chế độ "Hiện đại" mới.
Ở chế độ Cổ điển, thao tác cuộn (bằng bàn di chuột hoặc con lăn chuột) sẽ tiếp tục phóng to và thu nhỏ, trong khi thao tác giữ phím Shift và cuộn sẽ cuộn lên và xuống biểu đồ hình ngọn lửa.
Trong chế độ Hiện đại mới, các thao tác này được đảo ngược: thao tác cuộn hiện cuộn biểu đồ hình ngọn lửa, trong khi thao tác shift và cuộn sẽ thu phóng.
Các phím tắt (chẳng hạn như sử dụng WASD để điều hướng dấu vết) sẽ tiếp tục hoạt động mà không thay đổi.
Tổng quan về hai chiều
Ở gần đầu bảng điều khiển Hiệu suất là biểu đồ CPU, một phần của thông tin tổng quan về tiến trình. Thẻ này hiển thị mức sử dụng CPU ước tính trong quá trình ghi lại dấu vết, được phân tích theo loại công việc (ví dụ: màu cam cho việc thực thi tập lệnh, màu tím cho các thao tác kết xuất).
Chế độ này cung cấp thông tin tổng quan (đôi khi được gọi là bản đồ thu nhỏ) về dấu vết, cung cấp thông tin tóm tắt cấp cao về toàn bộ dòng thời gian ngay cả khi bạn phóng to để điều tra các vấn đề cụ thể.
Tuy nhiên, bạn có thể dễ dàng mất vị trí chính xác trong bản đồ thu nhỏ khi chủ yếu xem dấu vết và ngược lại. Vì vậy, chúng tôi đã ra mắt các tính năng mới giúp liên kết chế độ xem tổng quan với chế độ xem thu phóng. Bây giờ, khi bạn di chuột qua thông tin tổng quan, một đường dọc tương ứng sẽ xuất hiện trong biểu đồ hình ngọn lửa, đánh dấu cùng một thời điểm trong biểu đồ hình ngọn lửa:
Tương tự, việc di chuột qua các mục trong biểu đồ hình ngọn lửa sẽ làm nổi bật phần tương ứng của biểu đồ CPU. Đây là một cách tuyệt vời để biết chính xác những tác vụ nào đang gây ra các mức tăng đột biến đó của CPU.
Lọc dấu vết
Việc gỡ lỗi các vấn đề về hiệu suất thường liên quan đến việc sàng lọc một lượng lớn dữ liệu. Để giúp bạn tập trung vào thông tin phù hợp nhất, chúng tôi đã cải thiện khả năng lọc bỏ tạp âm.
Năm ngoái, chúng tôi đã ra mắt tính năng thêm tập lệnh trong bảng điều khiển Hiệu suất vào danh sách bỏ qua của DevTools, lọc ra các mục nhập ít liên quan hơn trong biểu đồ hình ngọn lửa. Ví dụ: nếu bạn đang gỡ lỗi hiệu suất của một thành phần trong trang, thì điều này có thể gây mất tập trung nếu ngăn xếp lệnh gọi của khung đủ sâu để yêu cầu bạn cuộn lên và xuống bảng điều khiển hiệu suất. Bạn thường muốn thu gọn nhiều ngăn xếp lệnh gọi đó để tập trung vào các phần quan trọng.
Bạn có thể nhấp chuột phải vào một mục trong biểu đồ hình ngọn lửa rồi chọn Add script to ignore list (Thêm tập lệnh vào danh sách bỏ qua). Thao tác này sẽ thêm tập lệnh vào danh sách bỏ qua của DevTools và thu gọn mọi mục trong đó trong biểu đồ hình ngọn lửa.
Tuy nhiên, giờ đây, bạn cũng có thể chỉnh sửa danh sách bỏ qua theo cách thủ công ngay trong nút ở đầu bảng điều khiển Hiệu suất. Biểu thức chính quy trong danh sách bỏ qua được chia sẻ trên DevTools, vì vậy, các tập lệnh trùng khớp sẽ bị bỏ qua khi gỡ lỗi trong bảng điều khiển Nguồn và được thu gọn thành các mục đơn trong biểu đồ hình ngọn lửa. Danh sách này sẽ tồn tại trong các phiên DevTools.
Bằng cách này, bạn có thể kiểm soát chi tiết những tệp cần bỏ qua và có một nơi thuận tiện để bật và tắt các quy tắc khi làm việc.
Giảm độ sáng của tập lệnh bên thứ ba
Các tập lệnh của bên thứ ba thường xuất hiện trên các trang web, nhưng chúng thường nằm ngoài tầm kiểm soát của chúng tôi hoặc không liên quan đến một phiên gỡ lỗi cụ thể. Tuỳ chọn Dim 3rd parties (Hộp đánh dấu làm mờ bên thứ ba) mới ở đầu bảng điều khiển Hiệu suất sẽ làm mờ tập lệnh và hoạt động mạng của bên thứ ba trong tiến trình, giúp giảm sự lộn xộn về hình ảnh và cho phép bạn tập trung vào những đóng góp về hiệu suất của bên thứ nhất.
Tuy nhiên, đôi khi bạn muốn có nhiều quyền kiểm soát hơn, chẳng hạn như tập trung vào một bên thứ ba cụ thể hoặc thậm chí chỉ nhận nội dung đóng góp từ API hoặc CDN của riêng bạn. Ở cuối bảng điều khiển trong thẻ Summary (Tóm tắt), bạn sẽ thấy bảng chi tiết về các bên thứ nhất và bên thứ ba mà Công cụ cho nhà phát triển có thể tìm thấy trong trang. Khi di chuột qua từng thực thể trong danh sách, mọi hoạt động không phải của thực thể đó sẽ chuyển sang màu xám.
Kết luận
Những tính năng mới này sẽ giúp bạn điều hướng bảng điều khiển Hiệu suất hiệu quả hơn và lọc ra những thông tin không cần thiết để tập trung vào những phần theo dõi quan trọng đối với bạn. Hãy dùng thử các tính năng này và cho chúng tôi biết cách cải thiện thêm hoặc những điểm cải tiến khác mà bạn muốn thấy.