Nội dung này có quen thuộc không? Bạn đang gỡ lỗi một vấn đề về hiệu suất trong Công cụ của Chrome cho nhà phát triển, nhưng lượng thông tin quá lớn trong bảng điều khiển Hiệu suất khiến bạn khó tập trung vào những phần phù hợp và hữu ích nhất. Giữa độ dài của dòng thời gian, chiều sâu của biểu đồ hình ngọn lửa và độ rộng của nhiều loại dữ liệu khác nhau, việc di chuyển có thể là một thách thức. Cực kỳ mạnh mẽ như bảng điều khiển Hiệu suất, nhưng mức độ hữu ích của bảng điều khiển này không nhất thiết phải đánh đổi mức độ hữu dụng.
Là một phần trong sáng kiến của chúng tôi nhằm cải thiện công cụ hiệu suất của Chrome, gần đây chúng tôi đã ra mắt ba tính năng mới nhằm giảm mật độ thông tin và giúp nhà phát triển tùy chỉnh quy trình công việc của họ:
- Ẩn những phần không liên quan của dòng thời gian
- Ẩn các phần không liên quan của biểu đồ hình ngọn lửa
- Ẩn các bản nhạc không liên quan
Trong bài đăng này, chúng ta sẽ xem xét kỹ hơn từng tính năng trong số này và cho thấy cách bạn có thể sử dụng chúng để chỉ tập trung vào thông tin quan trọng nhất.
Ẩn các phần không liên quan của dòng thời gian
Hiệu suất web hoạt động trên phạm vi mili giây, do đó, ngay cả khi bản ghi hiệu suất của bạn chỉ dài vài giây, bạn vẫn có rất nhiều cơ hội để khẳng định vị trí của mình.
Trong Chrome 122, chúng tôi đã thêm khả năng tạo breadcrumb (tập hợp liên kết phân cấp). Tính năng này cho phép bạn giới hạn các ranh giới của dòng thời gian để bạn chỉ có thể thu phóng hoặc xoay bên trong khu vực yêu thích do bạn đặt. Ví dụ: việc xác định dòng thời gian theo cách này có thể đặc biệt hữu ích nếu bạn đang cố gắng gỡ lỗi các vấn đề về khả năng phản hồi, nhờ đó, bạn có thể tập trung vào một tương tác đơn lẻ hoặc một nhiệm vụ dài có sự cố.
Ảnh chụp màn hình trước cho thấy cận cảnh tổng quan về dòng thời gian, trong đó trực quan hoá hoạt động của luồng chính, chẳng hạn như thực thi tập lệnh và công việc trình bày. Khi bạn giữ con trỏ trên đó, một nút mới sẽ xuất hiện để thiết lập các ranh giới của dòng thời gian thành cửa sổ hiện tại. Nút này được gắn nhãn theo chiều rộng của cửa sổ thời gian, tính bằng mili giây và biểu tượng . Đường dẫn nằm phía trên tổng quan về dòng thời gian và mỗi đường dẫn được gắn nhãn theo kích thước của khung thời gian.
Để dùng tính năng này:
- Thu phóng và xoay dòng thời gian đến khu vực quan tâm.
- Nhấp vào biểu tượng kính lúp trong phần tổng quan về dòng thời gian để kẹp dòng thời gian và đặt đường dẫn.
- Lặp lại thao tác này nếu cần để phóng to một khu vực mà bạn quan tâm lồng ghép.
- Nhấp vào breadcrumb (tập hợp liên kết phân cấp) để quay lại các khu vực mà bạn quan tâm trước đó hoặc toàn bộ dòng thời gian.
Việc cắt bớt dòng thời gian giúp đảm bảo rằng bạn sẽ không bao giờ vô tình cuộn ra ngoài giới hạn vào một phần không liên quan của dòng thời gian. Tuy nhiên, khi cần, bạn có thể nhấp vào breadcrumb (tập hợp liên kết phân cấp) để thu nhỏ lại. Một lợi ích khác là thông tin tổng quan về tiến trình sẽ luôn nhất quán với các giai đoạn sau. Điều này có thể giúp bạn dễ dàng xác định các cơ hội về hiệu suất, chẳng hạn như quy trình chỉnh lại bắt buộc và xác định nguyên nhân gốc rễ của các cơ hội đó trong biểu đồ hình ngọn lửa.
Ẩn các phần không liên quan của biểu đồ hình ngọn lửa
Việc phân tích hoạt động của luồng chính không hề đơn giản. Phần này của bảng điều khiển Hiệu suất được gọi là biểu đồ ngọn lửa, do thời gian và độ xoay của ngăn xếp lệnh gọi. Trong một số trường hợp đặc biệt, những ngăn xếp này có thể phức tạp đến mức khó có thể hiểu được mọi thứ và tập trung vào những gì bạn đang cố gắng tối ưu hoá.
Kể từ Chrome 124, bạn có thể tuỳ chỉnh chính xác các mục nhập trong biểu đồ hình ngọn lửa cần ẩn để có thể tập trung vào thông tin hữu ích nhất.
Khi bạn nhấp chuột phải vào một hàm trong biểu đồ hình ngọn lửa, một trình đơn theo bối cảnh sẽ xuất hiện với một số tuỳ chọn để ẩn các mục nhập:
- Ẩn hàm: Xoá hàm đã chọn khỏi biểu đồ hình ngọn lửa. Các phần tử con của hàm này sẽ di chuyển lên để xuất hiện ngay sau hàm mẹ.
- Ẩn phần tử con: Cắt bớt biểu đồ hình ngọn lửa tại hàm đã chọn, ẩn tất cả các phần tử con của hàm đó.
- Ẩn các phần tử con định kỳ: Xoá tất cả các phiên bản của hàm đã chọn khỏi phần còn lại của biểu đồ hình ngọn lửa.
Ngoài ra, bạn cũng có thể sử dụng một số phím tắt hữu ích khi chọn một hàm:
- H: ẩn hàm đã chọn
- C: ẩn các phần tử con của hàm đã chọn
- R: ẩn các phiên bản của hàm đã chọn sau trong ngăn xếp
- U: hiển thị các phần tử con bị ẩn của hàm đã chọn
Ẩn vĩnh viễn các tập lệnh không liên quan
Tuỳ chọn Add Script to ignore list (Thêm tập lệnh vào danh sách bỏ qua) sẽ ẩn hàm đã chọn khỏi biểu đồ hình ngọn lửa, cũng như tất cả hàm khác được xác định trong cùng một tệp tập lệnh. Tập lệnh cũng được thêm vào danh sách bỏ qua. Trình gỡ lỗi Công cụ cho nhà phát triển sẽ sử dụng tập lệnh này để áp dụng các hàm và bỏ qua các ngoại lệ bắt nguồn từ tập lệnh.
Những tập lệnh đã thêm vào danh sách bỏ qua vẫn được duy trì, nên các tập lệnh đó sẽ tiếp tục bị ẩn khỏi biểu đồ ngọn lửa trong các dấu vết mới. Các tập lệnh nằm ngoài tầm kiểm soát của bạn sẽ là ứng viên phù hợp cho danh sách bỏ qua. Mặt khác, việc ẩn các hàm riêng lẻ là tạm thời đối với dấu vết hiện tại và phụ thuộc vào tình huống khác. Ví dụ: có thể bạn muốn ẩn một ngăn xếp cồng kềnh gồm các lệnh gọi hàm đệ quy để dễ dàng xử lý dấu vết.
Để đảo ngược danh sách bỏ qua hoặc bất kỳ hàm ẩn nào khác trong biểu đồ hình ngọn lửa, bạn có thể sử dụng trình đơn theo bối cảnh để đặt lại các hàm con của hàm đã chọn hoặc đặt lại tất cả các hàm ẩn trong suốt quá trình theo dõi. Các hàm có phần tử con bị ẩn được chú thích bằng biểu tượng ▼ cũng như đặt lại phần tử con khi nhấp vào.
Mọi chiều sâu và độ phức tạp không cần thiết mà bạn có thể loại bỏ từ biểu đồ hình ngọn lửa sẽ giúp biểu đồ trở nên hữu ích hơn rất nhiều. Khi cần thiết, khả năng tuỳ chỉnh những mục mà bạn thấy là một điểm cải tiến mang tính công thái học nhằm giúp bạn tập trung sự chú ý vào thông tin quan trọng nhất cho nhiệm vụ đang thực hiện.
Ẩn các bản nhạc không liên quan
Hoạt động của luồng chính chỉ bao gồm một kênh của bảng điều khiển Hiệu suất. Các kênh trong bảng điều khiển Hiệu suất trực quan hoá hoạt động của một quy trình và tất cả đều được điều chỉnh theo một tiến trình chung để hỗ trợ quá trình gỡ lỗi. Ngoài kênh Chính, còn có các kênh riêng lẻ cho các khung phụ, luồng và worker khác mà trang sử dụng, cũng như theo dõi Mạng, Khung, Ảnh động và Tương tác. Nhiều kênh hơn cũng đánh dấu hoạt động của các quy trình Chrome cấp thấp hơn như IO, GPU và Trình tổng hợp. Rất nhiều thông tin! Chưa hết, đối với hầu hết các quy trình liên quan đến hiệu suất, bạn chỉ quan tâm đến thông tin trên một vài kênh mỗi lần.
Kể từ Chrome 125, chúng tôi đã bổ sung một chế độ cấu hình mới cho phép bạn ẩn các bản nhạc không cần thiết hoặc sắp xếp lại các bản nhạc đó theo ý thích. Ví dụ: nếu đang tối ưu hoá tương tác chậm, bạn có thể chọn ẩn mọi thứ trừ các kênh Tương tác, Chính và GPU.
Để chỉnh sửa các bản nhạc, hãy nhấp chuột phải vào tên của một bản nhạc bất kỳ rồi chọn Định cấu hình các bản nhạc.... Thao tác này sẽ mở ra chế độ cấu hình. Tại đây, bạn có thể hiển thị, ẩn hoặc sắp xếp lại từng bản nhạc. Nhấp vào nút Hoàn tất việc định cấu hình kênh để lưu các lựa chọn ưu tiên của bạn.
Việc định cấu hình các bản nhạc giúp bạn kiểm soát cách bảng Hiệu suất trình bày thông tin quan trọng cho quy trình làm việc của bạn. Bạn có thể sử dụng những chế độ cài đặt này để ẩn hoạt động khỏi các quy trình không liên quan và điều chỉnh theo cách dễ dàng nhất để truy cập vào dữ liệu bạn cần.
Kết thúc
Ba tính năng này cung cấp cho bạn các chế độ điều khiển công thái học mới và mạnh mẽ để tuỳ chỉnh quy trình làm việc liên quan đến hiệu suất. Bằng cách sử dụng các tính năng này và giảm bớt độ nhiễu, bạn sẽ có được vị thế tốt hơn nhiều để tìm thấy thông tin mình cần và hiểu rõ dữ liệu.
Chúng tôi muốn biết tính năng nào hoạt động hiệu quả hoặc cách cải thiện trải nghiệm của bạn. Hãy cho chúng tôi biết nếu bạn có câu hỏi hoặc ý kiến phản hồi chung bằng cách liên hệ với @ChromeDevTools. Nếu tính năng nào đó không hoạt động hoặc bạn có đề xuất về tính năng mới, hãy để lại nhận xét về vấn đề chưa được giải quyết này.
Đây chỉ mới là khởi đầu trong sáng kiến cải thiện công cụ cải thiện hiệu suất của Chrome. Chúng tôi rất vui được chia sẻ những kiến thức khác của mình nhằm giúp bảng điều khiển Hiệu suất dễ sử dụng và mạnh mẽ hơn bao giờ hết. Chúng tôi sẽ xuất bản bài đăng tiếp theo giới thiệu loạt tính năng tiếp theo ngay tại đây trên blog Chrome for Developers. Trong thời gian chờ đợi, hãy xem trang Tính năng mới trong Chrome để luôn nắm bắt mọi tính năng mới trong Công cụ cho nhà phát triển và Chrome.