Ngày phát hành: 13 tháng 11 năm 2024
Hãy tưởng tượng bạn đang xem một dấu vết hiệu suất và muốn làm nổi bật một khu vực cụ thể, chẳng hạn như tác vụ dài nhất hoặc một phần công việc không cần thiết. Có thể bạn muốn ghi chú để tham khảo sau này hoặc chia sẻ thông tin phát hiện được với đồng nghiệp. Cách tốt nhất để làm việc đó là gì?
Tất nhiên, bạn sẽ in dấu vết trên một tờ giấy lớn rồi vẽ và viết ghi chú theo cách thủ công, hoặc sử dụng phần mềm của bên thứ ba để vẽ ghi chú trên ảnh chụp màn hình của dấu vết! (Mặc dù đó là cách tốt nhất cho đến thời điểm này.)
Trong nỗ lực đơn giản hoá quy trình làm việc của nhà phát triển, chúng tôi rất vui mừng được giới thiệu một giải pháp thay thế cho các tuỳ chọn đó: khả năng thêm chú thích trực tiếp vào dấu vết trong bảng điều khiển Hiệu suất!
Giờ đây, bạn có thể chú thích dấu vết tại chỗ, dễ dàng di chuyển các chú thích đó và thậm chí lưu trực tiếp các chú thích đó trong tệp dấu vết. Nhờ đó, việc chia sẻ thông tin chi tiết nổi bật trở nên đơn giản như gửi tệp, đồng thời bạn không cần đến các công cụ hoặc giải pháp bên ngoài. Chú giải không chỉ giúp bạn gỡ lỗi hiệu suất mà còn giúp bạn nhanh chóng hiểu được ý của đồng nghiệp hoặc nâng cao khả năng hiểu biết của họ về những gì đang diễn ra mà không cần phải trao đổi nhiều.
Có ba loại chú thích:
Phạm vi thời gian có chú thích: Gắn nhãn cho bất kỳ phạm vi thời gian nào trong dòng thời gian
Mục được chú thích: Thêm nhãn vào bất kỳ mục nào trong dòng thời gian
Kết nối mục: Kết nối hai mục bất kỳ bằng một mũi tên để thể hiện mối quan hệ giữa các mục đó
Hãy xem xét từng loại chú thích và các trường hợp bạn có thể gặp phải khi chúng hữu ích.
Phạm vi thời gian có chú thích
Một quy trình làm việc phổ biến trong DevTools là ghi lại dấu vết để gỡ lỗi tương tác chậm. Lúc đầu, chế độ xem dấu vết có vẻ rất phức tạp, nhưng khi bạn xem chi tiết về các trình xử lý sự kiện và ngăn xếp lệnh gọi cụ thể, bạn sẽ thấy nó bắt đầu có ý nghĩa. Một việc bạn có thể làm để dễ dàng sử dụng chế độ xem theo dõi là tạo chú thích để gắn nhãn cách một khối thời gian thường được sử dụng. Ví dụ: bạn nên chú thích dải thời gian để giao diện người dùng cập nhật một cách có ý nghĩa sau khi người dùng tương tác.
Cách chú thích một phạm vi thời gian: Giữ phím Shift và kéo từ thời điểm bắt đầu tương tác đến thời điểm cập nhật giao diện người dùng. Sau đó, hãy nhập một nhãn để tạo chú thích. Nếu dải ô đã chọn không chính xác, hãy huỷ dải ô đó bằng cách nhấp ra khỏi dải ô trước khi nhập. Hoặc để chỉnh sửa nhãn của chú thích, hãy nhấp đúp vào nhãn đó. Hiện tại, bạn không thể điều chỉnh phạm vi thời gian của chú thích hiện có. Nếu khung thời gian không chính xác, hãy xoá chú thích đó rồi tạo một chú thích mới.
Với chú thích này, bạn sẽ có cái nhìn rõ ràng hơn về tất cả công việc phải diễn ra trước khi người dùng thấy được thay đổi, nhờ đó, bạn có thể tập trung gỡ lỗi cho phù hợp.
Mục nhập có chú thích
Để làm cho thay đổi mà người dùng nhìn thấy trở nên rõ ràng hơn, bạn cũng có thể chú thích tác vụ chịu trách nhiệm cho quá trình chuyển đổi bằng một nhãn mục nhập.
Cách tạo nhãn cho mục nhập: Nhấp đúp vào mục nhập đã chọn rồi nhập nhãn hoặc nhấp chuột phải vào mục nhập rồi chọn "Label Entry" (Nhãn mục nhập) trong trình đơn theo bối cảnh. Để chỉnh sửa nhãn của chú thích, hãy nhấp đúp vào mục hoặc nhãn. Ngoài ra, hãy chọn tuỳ chọn "Nhập nhãn" trong trình đơn theo bối cảnh.
Với các chú thích mục nhập này, bạn có thể dễ dàng phát hiện công việc (hoặc không) quan trọng đối với hoạt động tương tác và thời gian cần thiết để thực hiện công việc đó.
Kết nối mục nhập
Cách thứ ba để chú thích dấu vết là vẽ mối kết nối giữa lượt tương tác và tác vụ dài chịu trách nhiệm cho quá trình chuyển đổi.
Cách tạo mối kết nối giữa các mục: Nhấp đúp vào mục mà bạn muốn kết nối với một mục khác rồi nhấp vào mũi tên xuất hiện ở bên phải mục đó. Tiếp theo, hãy nhấp vào mục nhập mà bạn muốn kết nối với mục nhập đó. Ngoài ra, bạn có thể nhấp chuột phải vào mục nhập rồi chọn "Link Entries" (Liên kết mục nhập) trong trình đơn theo bối cảnh của mục nhập.
Vì vậy, mặc dù hoạt động tương tác đã kết thúc, nhưng bạn có thể sử dụng loại chú thích này để cho thấy rõ hơn cách hoạt động tương tác đó liên kết với các tác vụ dài tiếp theo cuối cùng chặn giao diện người dùng.
Xoá và ẩn chú thích
Bạn có thể nhanh chóng xoá tất cả chú thích khỏi chế độ xem danh sách chú thích trong thanh bên. Khi di chuột qua một chú thích, bạn sẽ thấy biểu tượng thùng rác . Nhấp vào biểu tượng này để xoá chú thích.
Ngoài ra, để xoá nhãn mục nhập và chú thích kết nối mục nhập liên kết với một sự kiện cụ thể, hãy nhấp chuột phải vào sự kiện đó rồi chọn "Xoá chú thích". Bạn cũng có thể xoá các chú thích có nhãn bằng cách xoá nhãn và lưu chú thích.
Nếu bạn muốn ẩn các chú thích mà không xoá chúng để không làm phiền bạn khám phá dấu vết, chỉ cần đánh dấu vào hộp đánh dấu "ẩn chú thích" ở cuối thanh bên chú thích. Lựa chọn ưu tiên này sẽ được lưu. Khi bạn tải một dấu vết có chú thích trong khi chế độ cài đặt này đang bật, các chú thích sẽ vẫn bị ẩn cho đến khi bạn bỏ đánh dấu hộp.
Lưu hoặc tải dấu vết được chú thích
Tuyệt vời, bạn đã thêm tất cả chú thích đó để giúp bản thân và người khác hiểu được dấu vết. Tiếp theo là gì?
Bạn không cần chụp ảnh màn hình dấu vết để gửi cho đồng nghiệp như trước đây, trước khi có chú thích. Bạn chỉ cần lưu tệp đã chú thích rồi gửi tệp đó cho họ. Vậy là xong! Họ có thể tải tệp lên bảng điều khiển Hiệu suất và xem tất cả chú thích bạn đã tạo trong ngữ cảnh của dấu vết, hoặc thậm chí có thể thêm chú thích khác và gửi lại cho bạn!
DevTools cũng sẽ lưu các loại tuỳ chỉnh khác trong chế độ xem theo dõi. Ví dụ: bạn có thể tách riêng một khu vực quan tâm bằng cách phóng to và đặt một đường dẫn, hoặc ẩn các mục nhập trong ngăn xếp lệnh gọi không liên quan. Tất cả các chế độ cài đặt đó sẽ được tệp theo dõi duy trì, giúp bạn dễ dàng cộng tác hơn trong việc gỡ lỗi hiệu suất. Với tất cả các tuỳ chỉnh này, bạn có thể thu hút sự chú ý đến những điều quan trọng nhất trong khi cung cấp bối cảnh của toàn bộ dấu vết tương tác, không giống như ảnh chụp màn hình.
Để giữ lại các chú thích và nội dung tuỳ chỉnh khác, hãy nhấp vào tuỳ chọn Save trace (Lưu dấu vết) trong biểu tượng tải xuống . Khi một dấu vết được tải, dấu vết đó sẽ chứa tất cả các tuỳ chỉnh đó. Lưu với chú giải là tuỳ chọn mặc định, nhưng nếu bạn chỉ muốn lưu tệp dấu vết thô, hãy chọn tuỳ chọn Lưu dấu vết mà không có chú giải.
Kết luận
Có vẻ như bạn cần phải tiếp thu nhiều thông tin, nhưng đừng lo! Bạn luôn có thể xem hướng dẫn tạo chú thích trong thẻ chú thích của thanh bên bảng điều khiển Hiệu suất. Thẻ này cung cấp hướng dẫn khi không có chú thích nào và hiển thị chế độ xem danh sách các chú thích sau khi tạo.
Tương tự như vậy, các chú thích trong bảng điều khiển Hiệu suất giúp nhà phát triển xác định chính xác những khoảnh khắc quan trọng trong một dấu vết, thêm ngữ cảnh và thông tin chi tiết được cá nhân hoá. Điều này giúp đơn giản hoá quy trình phân tích, giúp bạn dễ dàng chia sẻ và cộng tác trong việc tối ưu hoá hiệu suất. Hãy dùng thử các chú thích trong bảng điều khiển Hiệu suất và cho chúng tôi biết cảm nhận của bạn. Nếu bạn có ý kiến phản hồi, chúng tôi rất mong được đọc bình luận của bạn trong vấn đề công khai.
Bạn không cần phải sử dụng các công cụ bên ngoài nữa mà có thể làm việc hiệu quả hơn!