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