Tài liệu tham khảo về các tính năng hiệu suất

Trang này là tài liệu tham khảo toàn diện về các tính năng của Chrome DevTools liên quan đến việc phân tích hiệu suất.

Hãy xem bài viết Phân tích hiệu suất thời gian chạy để xem hướng dẫn về cách phân tích hiệu suất của một trang bằng Chrome DevTools.

Màn hình chỉ số theo thời gian thực

Khi mở bảng điều khiển Hiệu suất lần đầu tiên, bạn sẽ thấy màn hình Chỉ số theo thời gian thực. Màn hình này cung cấp cho bạn thông tin tóm tắt tức thì về hiệu suất của trang hiện tại bằng cách sử dụng ba Core Web Vitals.

Các chỉ số sẽ cập nhật khi bạn tương tác với trang và chuyển đến trang mới, bao gồm cả các thao tác điều hướng mềm phía máy khách trong ứng dụng trang đơn, được biểu thị bằng huy hiệu SOFT NAV (ĐIỀU HƯỚNG MỀM). Đây là một cách hay để xác định các vấn đề về hiệu suất, đặc biệt là đối với INP và CLS nếu chúng chỉ xuất hiện trong một số trường hợp nhất định. Sau khi vấn đề về hiệu suất lặp lại liên tục, bạn có thể ghi lại dấu vết để biết thêm thông tin chi tiết nhằm gỡ lỗi vấn đề cơ bản.

Các tính năng của màn hình chỉ số theo thời gian thực

Ngoài các chỉ số, màn hình Chỉ số theo thời gian thực còn có các tính năng sau:

• Chỉ số thực địa từ CrUX khi được bật trong bảng điều khiển Chỉ số thực địa.
• Tóm tắt mọi điểm khác biệt đáng chú ý giữa chỉ số cục bộ và chỉ số thực địa.
• Phần tử LCP mà bạn có thể di chuột để làm nổi bật phần tử này trên trang.
• Thông tin chi tiết về cụm CLS và loại INP
• Thông tin chi tiết hơn khi di chuột lên các chỉ số (ví dụ: các phần phụ của LCP và INP, cũng như biểu đồ tần suất thực địa)
• Bảng Tương tác và Thay đổi bố cục ghi lại nhật ký tương tác và thay đổi bố cục.
• Bảng điều khiển Chỉ số thực tế, nơi bạn có thể bật dữ liệu CrUX, thông tin chi tiết về khoảng thời gian của dữ liệu đó, khả năng chuyển đổi giữa dữ liệu nguồn gốc và dữ liệu URL (nếu có) cũng như giữa dữ liệu trên máy tính và dữ liệu di động.
• Một bảng cài đặt môi trường có hướng dẫn về thiết bị, CPU và tính năng hạn chế băng thông mạng cần sử dụng, dựa trên dữ liệu CrUX.

Để biết thêm thông tin, hãy xem bài đăng trên blog Theo dõi hiệu suất Core Web Vitals của người dùng thực tế và cục bộ trong Công cụ cho nhà phát triển.

Ghi lại hiệu suất

Bạn có thể ghi lại hiệu suất thời gian chạy hoặc hiệu suất tải bằng các nút ở trên cùng bên trái hoặc nút bên phải màn hình:

Ghi lại hiệu suất thời gian chạy

Ghi lại hiệu suất thời gian chạy khi bạn muốn phân tích hiệu suất của một trang khi trang đó đang chạy, thay vì khi tải.

1. Chuyển đến trang mà bạn muốn phân tích.
2. Nhấp vào thẻ Hiệu suất trong Công cụ cho nhà phát triển.
3. Nhấp vào biểu tượng Ghi âm .
4. Hãy tương tác với trang này. Công cụ cho nhà phát triển ghi lại mọi hoạt động trên trang xảy ra do các lượt tương tác của bạn.
5. Nhấp vào Ghi một lần nữa hoặc nhấp vào Dừng để dừng ghi.

Ghi lại hiệu suất tải

Ghi lại hiệu suất tải khi bạn muốn phân tích hiệu suất của một trang trong quá trình tải, thay vì chạy.

1. Truy cập vào trang mà bạn muốn phân tích.
2. Mở bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển.
3. Nhấp vào Ghi và tải lại . Trước tiên, Công cụ cho nhà phát triển sẽ chuyển đến about:blank để xoá mọi ảnh chụp màn hình và dấu vết còn lại. Sau đó, DevTools sẽ ghi lại các chỉ số hiệu suất trong khi tải lại trang, rồi tự động dừng ghi lại sau khi tải xong vài giây.

Công cụ cho nhà phát triển sẽ tự động phóng to phần bản ghi nơi diễn ra hầu hết hoạt động.

Trong ví dụ này, bảng điều khiển Hiệu suất cho thấy hoạt động trong quá trình tải trang.

Chụp ảnh màn hình trong khi ghi

Bật hộp đánh dấu Screenshots (Ảnh chụp màn hình) để chụp ảnh màn hình của mọi khung hình trong khi ghi.

Để tuỳ chỉnh độ trung thực của bản ghi hình ảnh trong phạm vi ngân sách bộ nhớ, hãy mở Capture settings (Chế độ cài đặt chụp) rồi chọn một chế độ cài đặt sẵn về giới hạn số lượng và kích thước khung hình trong trình đơn thả xuống Screenshot capture (Chụp ảnh màn hình).

Hãy xem phần Xem ảnh chụp màn hình để tìm hiểu cách tương tác với ảnh chụp màn hình.

Buộc thu gom rác trong khi ghi

Trong khi bạn đang ghi lại một trang, hãy nhấp vào biểu tượng Thu gom rác mop để buộc thu gom rác.

Hiện chế độ cài đặt ghi hình

Nhấp vào Capture settings (Cài đặt chụp) để hiển thị thêm các chế độ cài đặt liên quan đến cách Công cụ của Chrome cho nhà phát triển chụp bản ghi hiệu suất.

Tắt các mẫu JavaScript

Theo mặc định, bản ghi Chính sẽ hiển thị ngăn xếp lệnh gọi chi tiết của các hàm JavaScript được gọi trong quá trình ghi. Cách tắt các ngăn xếp lệnh gọi này:

1. Mở trình đơn Chế độ cài đặt chụp . Xem phần Hiển thị chế độ cài đặt ghi âm.
2. Chọn hộp đánh dấu Tắt mẫu JavaScript.
3. Ghi lại trang.

Các ảnh chụp màn hình sau đây cho thấy sự khác biệt giữa việc tắt và bật các mẫu JavaScript. Bản ghi Chính của bản ghi sẽ ngắn hơn nhiều khi bạn tắt tính năng lấy mẫu, vì tính năng này bỏ qua tất cả ngăn xếp lệnh gọi JavaScript.

Ví dụ này cho thấy một bản ghi có các mẫu JS bị vô hiệu hoá.

Ví dụ này cho thấy một bản ghi có các mẫu JS được bật.

Điều tiết mạng trong khi ghi

Cách điều tiết mạng trong khi ghi:

1. Mở trình đơn Cài đặt chụp . Xem phần Hiện chế độ cài đặt ghi hình.
2. Đặt Mạng thành mức hạn chế băng thông đã chọn.

Trong trình đơn thả xuống, bảng điều khiển Hiệu suất cũng có thể đề xuất một giá trị đặt trước điều tiết mặc định hoặc một giá trị đặt trước gần đúng với trải nghiệm của cơ sở người dùng dựa trên dữ liệu thực địa.

Điều tiết CPU trong khi ghi

Cách điều tiết CPU trong khi ghi:

1. Mở trình đơn Cài đặt chụp . Xem phần Hiển thị chế độ cài đặt ghi âm.
2. Đặt CPU thành mức điều tiết đã chọn.

Việc điều tiết phụ thuộc vào khả năng của máy tính. Ví dụ: tuỳ chọn làm chậm 2 lần khiến CPU hoạt động chậm hơn 2 lần so với khả năng thông thường. DevTools không thể mô phỏng chính xác CPU của thiết bị di động, vì cấu trúc của thiết bị di động khác với cấu trúc của máy tính và máy tính xách tay.

Trong trình đơn thả xuống, bảng điều khiển Hiệu suất cũng có thể đề xuất một giá trị đặt trước điều tiết mặc định hoặc một giá trị đặt trước gần đúng với trải nghiệm của cơ sở người dùng dựa trên dữ liệu thực địa.

Bật số liệu thống kê về bộ chọn CSS

Cách xem số liệu thống kê về bộ chọn quy tắc CSS trong các sự kiện Tính toán lại kiểu chạy trong thời gian dài:

1. Mở trình đơn Chế độ cài đặt chụp . Xem phần Hiển thị chế độ cài đặt ghi âm.
2. Đánh dấu vào hộp Bật số liệu thống kê về bộ chọn CSS.

Để biết thêm thông tin, hãy xem cách Phân tích hiệu suất của bộ chọn CSS trong các sự kiện Tính toán lại kiểu.

Bật khả năng đo lường nâng cao về hoạt động vẽ

Cách xem thông tin chi tiết về khả năng đo lường hoạt động vẽ:

1. Mở trình đơn Chế độ cài đặt chụp . Xem phần Hiển thị chế độ cài đặt ghi âm.
2. Đánh dấu vào hộp Bật tính năng đo lường nâng cao cho hoạt động kết xuất.

Để tìm hiểu cách tương tác với thông tin vẽ, hãy xem phần Xem lớp và Xem trình phân tích vẽ.

Hiện các kênh tuỳ chỉnh

Bật các bản tóm tắt về nhóm bản nhạc tuỳ chỉnh và bản nhạc tuỳ chỉnh trong bản tóm tắt dấu vết. Bạn có thể tuỳ chỉnh các bản tóm tắt này bằng API Khả năng mở rộng của Công cụ cho nhà phát triển.

Xoá bản ghi âm trước đó

Sau khi ghi, hãy nhấn vào Xoá bản ghi để xoá bản ghi đó khỏi bảng điều khiển Hiệu suất.

Phân tích bản ghi hiệu suất

Sau khi bạn ghi lại hiệu suất thời gian chạy hoặc ghi lại hiệu suất tải, bảng điều khiển Hiệu suất sẽ cung cấp nhiều dữ liệu để phân tích hiệu suất của những gì vừa xảy ra.

Chú thích và chia sẻ bản ghi

Xem phần Chú thích và chia sẻ kết quả về hiệu suất.

Nhận thông tin chi tiết hữu ích

Bảng điều khiển Hiệu suất bao gồm thông tin chi tiết về hiệu suất cũng xuất hiện trong báo cáo Lighthouse. Những thông tin chi tiết này có thể đề xuất cách cải thiện hiệu suất và cung cấp thông tin phân tích có hướng dẫn về các vấn đề về hiệu suất sau đây, chẳng hạn như các phần phụ của LCP và INP, vấn đề về việc phát hiện yêu cầu LCP, bên thứ ba, cũng như các tài nguyên JavaScript cũ và trùng lặp. Để xem danh sách đầy đủ, hãy xem tài liệu Thông tin chi tiết về hiệu suất.

Thông tin chi tiết sẽ được thông qua khi không phát hiện thấy vấn đề nào. Thẻ Thông tin chi tiết liệt kê các thông tin chi tiết này trong mục Thông tin chi tiết đã qua được thu gọn ở dưới cùng. Những thông tin chi tiết không đạt yêu cầu sẽ xuất hiện trong các phần riêng biệt.

Cách sử dụng thông tin chi tiết:

1. Ghi lại hiệu suất.
2. Trong thanh bên trái của bảng điều khiển Hiệu suất, hãy mở thẻ Thông tin chi tiết, mở rộng các mục, rồi di chuột qua và nhấp vào các mục. Bảng điều khiển Hiệu suất sẽ làm nổi bật các sự kiện tương ứng trong dấu vết.

Khám phá bản ghi

Để giúp bạn thao tác, khi bạn di chuột qua dấu vết hiệu suất, bảng điều khiển Hiệu suất sẽ làm như sau:

• Cho bạn thấy một điểm đánh dấu dọc trải dài trên toàn bộ dấu vết hiệu suất khi bạn di chuột qua Tổng quan về dòng thời gian.
• Làm nổi bật một dải ô trong Tổng quan về dòng thời gian khi bạn di chuột qua các mục trong kênh Chính.

Để kiểm tra kỹ bản ghi hiệu suất, bạn có thể chọn một phần của bản ghi, cuộn biểu đồ hình ngọn lửa dài, phóng to và thu nhỏ, đồng thời sử dụng breadcrumb để chuyển giữa các mức thu phóng.

Sử dụng phím tắt để di chuyển

Để sử dụng phím tắt nhằm di chuyển nhanh trong bản ghi, trước tiên, hãy chọn kiểu di chuyển bằng bàn phím mà bạn muốn.

Ở góc trên cùng bên phải của bảng điều khiển, hãy nhấp vào biểu tượng trợ giúp Hiện phím tắt rồi chọn một trong các phím tắt sau:

• Cổ điển: Thu phóng bằng con lăn chuột (bàn di chuột lên hoặc xuống) và cuộn dọc bằng tổ hợp phím Shift + con lăn chuột.
• Hiện đại: Cuộn dọc bằng con lăn chuột, cuộn ngang bằng tổ hợp phím Shift + con lăn chuột và thu phóng bằng tổ hợp phím Command/Control + con lăn chuột.

Hộp thoại phím tắt cũng cung cấp cho bạn một bảng thông tin về các phím tắt hiện có.

Chọn một phần của bản ghi

Trong thanh thao tác của bảng điều khiển Hiệu suất và ở đầu bản ghi, bạn có thể thấy phần Tổng quan về dòng thời gian với các biểu đồ CPU và NET.

Để chọn một phần của bản ghi, hãy nhấp và giữ, sau đó kéo sang trái hoặc sang phải trên Tổng quan về dòng thời gian.

Cách chọn một phần bằng bàn phím:

1. Tập trung vào bản nhạc Main hoặc bất kỳ bản nhạc nào ở gần đó.
2. Sử dụng các phím W, A, S, D để lần lượt phóng to, di chuyển sang trái, thu nhỏ và di chuyển sang phải.

Cách chọn một phần bằng bàn di chuột:

1. Di chuột qua phần Tổng quan về dòng thời gian hoặc bất kỳ bản nhạc nào (Chính và các bản nhạc lân cận).
2. Dùng hai ngón tay vuốt lên để thu nhỏ, vuốt sang trái để di chuyển sang trái, vuốt xuống để phóng to và vuốt sang phải để di chuyển sang phải.

Tạo đường dẫn và chuyển đổi giữa các mức thu phóng

Tổng quan về dòng thời gian cho phép bạn tạo nhiều breadcrumb lồng nhau liên tiếp, tăng mức thu phóng, sau đó chuyển đổi tự do giữa các mức thu phóng.

Cách tạo và sử dụng đường dẫn:

1. Trong phần Tổng quan về dòng thời gian, hãy chọn một phần của bản ghi.
2. Di chuột qua phần bạn muốn rồi nhấp vào nút N mili giây zoom_in. Lựa chọn này sẽ mở rộng để lấp đầy Thông tin tổng quan về Dòng thời gian. Một chuỗi breadcrumb bắt đầu được tạo ở đầu Tổng quan về dòng thời gian.
3. Lặp lại hai bước trước đó để tạo một breadcrumb lồng nhau khác. Bạn có thể tiếp tục lồng các breadcrumb miễn là phạm vi lựa chọn lớn hơn 5 mili giây.
4. Để chuyển đến một mức thu phóng đã chọn, hãy nhấp vào đường dẫn tương ứng trong chuỗi ở đầu Tổng quan về dòng thời gian.

Để xoá các đường dẫn con của một đường dẫn, hãy nhấp chuột phải vào đường dẫn mẹ rồi chọn Xoá đường dẫn con.

Cuộn biểu đồ hình ngọn lửa dài

Để cuộn biểu đồ hình ngọn lửa dài trong kênh Main (Chính) hoặc bất kỳ kênh lân cận nào, hãy nhấp và giữ, sau đó kéo theo hướng bất kỳ cho đến khi nội dung bạn đang tìm xuất hiện.

Bỏ qua các tập lệnh không liên quan trong biểu đồ hình ngọn lửa

Để tập trung hơn vào mã, bạn có thể thêm các tập lệnh không liên quan vào danh sách bỏ qua.

Để bỏ qua tập lệnh, hãy làm theo một trong những cách sau:

• Nhấp vào biểu tượng thu gọn Hiện hộp thoại cài đặt danh sách bỏ qua trong thanh thao tác trên cùng rồi nhập một biểu thức chính quy vào trường nhập dữ liệu. Biểu đồ hình ngọn lửa sẽ áp dụng quy tắc mới khi bạn nhập.
• Nhấp chuột phải vào một tập lệnh rồi chọn Thêm tập lệnh vào danh sách bỏ qua. Bảng Hiệu suất sẽ thêm tập lệnh này vào danh sách trong hộp thoại compress Show ignore list settings dialog (Hiện hộp thoại cài đặt danh sách bỏ qua).

Bảng điều khiển sẽ tự động thu gọn các tập lệnh lồng nhau quá mức và đánh dấu chúng là On ignore list (REGULAR_EXPRESSION).

Trong hộp thoại compress Show ignore list settings dialog (Hiện hộp thoại cài đặt danh sách bỏ qua), bạn có thể bật và tắt các quy tắc của danh sách bỏ qua.

Để xoá một tập lệnh khỏi danh sách bỏ qua, hãy nhấp chuột phải vào tập lệnh đó trong biểu đồ hình ngọn lửa rồi chọn Xoá tập lệnh khỏi danh sách bỏ qua hoặc di chuột lên tập lệnh đó trong compress Hộp thoại hiện chế độ cài đặt danh sách bỏ qua rồi nhấp vào delete Xoá.

Công cụ cho nhà phát triển lưu các quy tắc danh sách bỏ qua mà bạn thêm vào phần cài đặt Cài đặt > Danh sách bỏ qua.

Ngoài ra, để chỉ tập trung vào tập lệnh của bên thứ nhất, hãy đánh dấu vào hộp kiểm check_box Làm mờ bên thứ ba. Bảng điều khiển Hiệu suất sẽ chuyển các tập lệnh của bên thứ ba sang màu xám.

Tìm kiếm hoạt động

Bạn có thể tìm kiếm trên các hoạt động trong kênh Main (Chính) và các yêu cầu trong kênh Network (Mạng).

Để mở hộp tìm kiếm ở cuối bảng điều khiển Hiệu suất, hãy nhấn:

• macOS: Command+F
• Windows, Linux: Control+F

Ví dụ này cho thấy một biểu thức chính quy trong hộp tìm kiếm ở dưới cùng, giúp tìm thấy mọi hoạt động bắt đầu bằng E.

Cách chuyển qua lại giữa các hoạt động phù hợp với cụm từ tìm kiếm của bạn:

• Nhấp vào nút expand_less Trước hoặc expand_more Tiếp theo.
• Nhấn tổ hợp phím Shift+Enter để chọn mục trước hoặc nhấn phím Enter để chọn mục tiếp theo.

Bảng điều khiển Hiệu suất cho thấy một chú giải công cụ về hoạt động được chọn trong hộp tìm kiếm.

Cách sửa đổi chế độ cài đặt truy vấn:

• Nhấp vào biểu tượng match_case Khớp chữ hoa chữ thường để đặt cụm từ tìm kiếm phân biệt chữ hoa chữ thường.
• Nhấp vào regular_expression Biểu thức chính quy để sử dụng biểu thức chính quy trong truy vấn.

Để ẩn hộp tìm kiếm, hãy nhấp vào Huỷ.

Thay đổi thứ tự của các bản nhạc và ẩn chúng

Để dọn dẹp dấu vết hiệu suất, bạn có thể thay đổi thứ tự của các bản nhạc và ẩn những bản nhạc không liên quan trong chế độ cấu hình bản nhạc.

Cách di chuyển và ẩn kênh:

1. Để chuyển sang chế độ cấu hình, hãy nhấp chuột phải vào tên dòng rồi chọn Configure tracks (Định cấu hình dòng).
2. Nhấp vào biểu tượng arrow_upward lên hoặc arrow_downward xuống để di chuyển một bản nhạc lên hoặc xuống. Nhấp vào biểu tượng visibility_off để ẩn.
3. Khi hoàn tất, hãy nhấp vào Kết thúc việc định cấu hình kênh ở dưới cùng để thoát chế độ định cấu hình.

Hãy xem video để biết cách thực hiện quy trình này.

Bảng điều khiển Hiệu suất lưu cấu hình theo dõi cho các dấu vết mới nhưng không lưu trong các phiên Công cụ cho nhà phát triển tiếp theo.

Xem hoạt động của luồng chính

Sử dụng kênh Main (Chính) để xem hoạt động đã xảy ra trên luồng chính của trang.

Nhấp vào một sự kiện để xem thêm thông tin về sự kiện đó trong thẻ Tóm tắt, bao gồm nhưng không giới hạn ở: thời lượng (và thời lượng tự thực hiện), đường liên kết đến dòng tương ứng trong tập lệnh nguồn, URL gốc (có tên thực thể, nếu biết), dấu vết ngăn xếp (nếu có) và thông tin chi tiết về thời gian trong biểu đồ hình tròn.

Bảng Hiệu suất sẽ đánh dấu sự kiện đã chọn bằng màu xanh dương.

Ví dụ này cho thấy thêm thông tin về sự kiện lệnh gọi hàm get trong thẻ Tóm tắt.

Phân biệt giữa sự kiện của bên thứ nhất và bên thứ ba

Việc phụ thuộc quá nhiều vào mã của bên thứ ba có thể ảnh hưởng tiêu cực đến hiệu suất tải. Bảng điều khiển Hiệu suất có thể giúp bạn phân biệt trực quan giữa các sự kiện của bên thứ nhất và bên thứ ba trong dấu vết, nhờ đó bạn có thể đưa ra quyết định sáng suốt hơn về việc giảm hoặc trì hoãn việc tải mã của bên thứ ba để ưu tiên nội dung trên trang của bạn.

Chỉ tập trung vào hiệu suất của mã bên thứ nhất:

1. Đảm bảo rằng bạn không chọn mục nào trong dấu vết hiệu suất hoặc trong thẻ Thông tin chi tiết. Để làm việc này, hãy nhấp vào một khoảng trống trong dấu vết.
2. Đánh dấu vào check_box Làm mờ bên thứ ba trong thanh thao tác ở trên cùng. Bảng điều khiển Hiệu suất sẽ làm mờ các sự kiện liên quan đến bên thứ ba khỏi dấu vết hiệu suất và chỉ làm nổi bật bên thứ nhất.

Làm nổi bật các sự kiện bằng bảng "Bên thứ nhất / bên thứ ba"

Trong phạm vi đã chọn trên Tổng quan về dòng thời gian và khi không có sự kiện nào được chọn, thẻ Tóm tắt sẽ cho thấy bảng Bên thứ nhất / bên thứ ba liệt kê kích thước chuyển và thời gian luồng chính tương ứng của những thành phần sau:

• Thực thể bên thứ nhất được đánh dấu bằng huy hiệu 1st party.
• Tất cả pháp nhân bên thứ ba được phát hiện trong phạm vi đã chọn, chưa được đánh dấu.
• Tiện ích được đánh dấu bằng huy hiệu Extension.
• [unattributed] thực thể khác.

Để xem các sự kiện liên quan được làm nổi bật trong dấu vết và phần còn lại được làm mờ, hãy di chuột qua các thực thể trong bảng. Để giữ cho các sự kiện của một thực thể được làm nổi bật, hãy chọn thực thể đó trong bảng. Để xoá phần đánh dấu, hãy nhấp vào một khoảng trống bất kỳ trong dấu vết.

Để mở các hoạt động được nhóm theo thực thể này trong thẻ Từ dưới lên, hãy di chuột qua thực thể trong bảng rồi nhấp vào biểu tượng account_tree Từ dưới lên bên cạnh.

Đọc biểu đồ hình ngọn lửa

Bảng điều khiển Hiệu suất biểu thị hoạt động của luồng chính trong biểu đồ hình ngọn lửa. Trục x biểu thị bản ghi theo thời gian. Trục y biểu thị ngăn xếp lệnh gọi. Các sự kiện ở trên gây ra các sự kiện bên dưới.

Ví dụ này minh hoạ một biểu đồ hình ngọn lửa trong dấu vết Chính. Sự kiện click đã gây ra một lệnh gọi hàm ẩn danh. Đến lượt, hàm này gọi onEndpointClick_, hàm này gọi handleClick_, v.v.

Bảng điều khiển Hiệu suất chỉ định màu ngẫu nhiên cho các tập lệnh để phân chia biểu đồ hình ngọn lửa và giúp biểu đồ dễ đọc hơn. Trong ví dụ trước, các lệnh gọi hàm từ một tập lệnh có màu xanh dương nhạt. Các lệnh gọi từ một tập lệnh khác có màu hồng nhạt. Màu vàng đậm hơn thể hiện hoạt động viết tập lệnh và sự kiện màu tím thể hiện hoạt động kết xuất. Các sự kiện màu vàng và tím đậm này nhất quán trên tất cả các bản ghi.

Các tác vụ cần nhiều thời gian cũng được làm nổi bật bằng một hình tam giác màu đỏ và phần vượt quá 50 mili giây được tô màu đỏ:

Trong ví dụ này, tác vụ mất hơn 400 mili giây, vì vậy, phần đại diện cho 350 mili giây cuối cùng được tô màu đỏ, trong khi 50 mili giây đầu tiên thì không.

Ngoài ra, chế độ Main (Chính) cho thấy thông tin về các hồ sơ Trình phân tích CPU đã bắt đầu và dừng bằng các hàm bảng điều khiển profile() và profileEnd(). Việc gọi console.profileEnd() trong mã hoặc trong Bảng điều khiển sẽ tự động mở bảng Hiệu suất và cho thấy dấu vết đã ghi.

Để ẩn biểu đồ hình ngọn lửa chi tiết về các lệnh gọi JavaScript, hãy xem phần Tắt mẫu JavaScript. Khi tắt mẫu JS, bạn chỉ thấy các sự kiện cấp cao như Event (click) và Function Call.

Theo dõi trình khởi tạo sự kiện

Bản nhạc Chính có thể hiển thị các mũi tên kết nối các trình khởi tạo sau đây và các sự kiện mà chúng gây ra:

• Vô hiệu hoá kiểu hoặc bố cục -> Tính toán lại kiểu hoặc Bố cục
• Yêu cầu khung ảnh động -> Đã kích hoạt khung ảnh động
• Request Idle Callback (Yêu cầu lệnh gọi lại ở trạng thái rảnh) -> Fire Idle Callback (Kích hoạt lệnh gọi lại ở trạng thái rảnh)
• Install Timer (Bộ hẹn giờ cài đặt) -> Timer Fired (Đã kích hoạt bộ hẹn giờ)
• Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay của WebSocket hoặc Huỷ bỏ WebSocket
• Lên lịch postTask -> Kích hoạt postTask hoặc Huỷ postTask

Để xem các mũi tên, hãy tìm trình khởi tạo hoặc sự kiện mà trình khởi tạo đó gây ra trong biểu đồ hình ngọn lửa rồi chọn trình khởi tạo hoặc sự kiện đó.

Khi được chọn, thẻ Tóm tắt sẽ hiển thị các đường liên kết Trình khởi tạo cho đối với trình khởi tạo và các đường liên kết Do... khởi tạo đối với các sự kiện mà trình khởi tạo gây ra. Nhấp vào các điểm đánh dấu này để chuyển giữa các sự kiện tương ứng.

Ẩn các hàm và hàm con trong biểu đồ hình ngọn lửa

Để đơn giản hoá biểu đồ hình ngọn lửa trong luồng Chính, bạn có thể ẩn các hàm đã chọn hoặc các hàm con của chúng:

1. Trong bản nhạc Main (Chính), hãy nhấp chuột phải vào một hàm rồi chọn một trong các lựa chọn sau hoặc nhấn phím tắt tương ứng:

   • Ẩn hàm (H)
   • Ẩn các phần tử con (C)
   • Ẩn các phần tử con lặp lại (R)
   • Đặt lại con (U)
   • Đặt lại dấu vết (T)
   • Thêm tập lệnh vào danh sách bỏ qua (I)

   

   Nút thả xuống arrow_drop_down sẽ xuất hiện bên cạnh tên hàm có các hàm con bị ẩn.

2. Để xem số lượng phần tử con bị ẩn, hãy di chuột lên nút thả xuống arrow_drop_down.

   

3. Để đặt lại một hàm có các hàm con bị ẩn hoặc toàn bộ biểu đồ hình ngọn lửa, hãy chọn hàm đó rồi nhấn U hoặc nhấp chuột phải vào hàm bất kỳ rồi chọn Reset trace (Đặt lại dấu vết).

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

Để thêm một tập lệnh vào danh sách bỏ qua, hãy 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.

Biểu đồ này sẽ thu gọn các tập lệnh bị bỏ qua, đánh dấu các tập lệnh đó là Trong danh sách bỏ qua và thêm các tập lệnh đó vào các quy tắc Loại trừ tuỳ chỉnh trong cài đặt Cài đặt > Danh sách bỏ qua. Các tập lệnh bị bỏ qua sẽ được lưu cho đến khi bạn xoá chúng khỏi dấu vết hoặc khỏi Quy tắc loại trừ tuỳ chỉnh.

Xem các hoạt động trong bảng

Sau khi ghi lại một trang, bạn không cần chỉ dựa vào bản ghi Chính để phân tích các hoạt động. Công cụ cho nhà phát triển cũng cung cấp 3 chế độ xem dạng bảng để phân tích các hoạt động. Mỗi chế độ xem sẽ cung cấp cho bạn một góc nhìn khác nhau về các hoạt động:

• Khi bạn muốn xem các hoạt động gốc gây ra nhiều công việc nhất, hãy sử dụng thẻ Cây lệnh gọi.
• Khi bạn muốn xem những hoạt động mà bạn đã dành nhiều thời gian nhất, hãy sử dụng thẻ Bottom-up (Từ dưới lên).
• Khi bạn muốn xem các hoạt động theo thứ tự diễn ra trong quá trình ghi, hãy sử dụng thẻ Nhật ký sự kiện.

Bạn có thể nhấp vào một mục trong bất kỳ bảng nào trong số 3 bảng (và trong bảng bên thứ nhất / bên thứ ba trong thẻ Tóm tắt) để giữ cho các sự kiện tương ứng được làm nổi bật trong dấu vết và làm mờ phần còn lại khi bạn duyệt xem dấu vết hiệu suất.

Để giúp bạn tìm thấy nội dung mình cần nhanh hơn, cả ba thẻ đều có các nút để lọc nâng cao bên cạnh thanh Bộ lọc:

• match_case Khớp chữ hoa/chữ thường.
• regular_expression Biểu thức chính quy.
• match_word Khớp cả từ.

Mỗi chế độ xem dạng bảng trong bảng điều khiển Hiệu suất đều cho thấy các đường liên kết đến những hoạt động như lệnh gọi hàm. Để giúp bạn gỡ lỗi, Công cụ cho nhà phát triển sẽ tìm các khai báo hàm tương ứng trong tệp nguồn. Ngoài ra, nếu có bản đồ nguồn phù hợp và được bật, Công cụ cho nhà phát triển sẽ tự động tìm các tệp gốc.

Nhấp vào một đường liên kết để mở một tệp nguồn trong bảng điều khiển Nguồn.

Hoạt động gốc

Sau đây là nội dung giải thích về khái niệm hoạt động gốc được đề cập trong thẻ Call tree (Cây lệnh gọi), thẻ Bottom-up (Từ dưới lên) và phần Event log (Nhật ký sự kiện).

Hoạt động gốc là những hoạt động khiến trình duyệt thực hiện một số công việc. Ví dụ: khi bạn nhấp vào một trang, trình duyệt sẽ kích hoạt hoạt động Event làm hoạt động gốc. Sau đó, Event đó có thể khiến trình xử lý thực thi.

Trong biểu đồ hình ngọn lửa của bản theo dõi Main (Chính), các hoạt động gốc nằm ở đầu biểu đồ. Trong thẻ Call Tree (Cây lệnh gọi) và Event log (Nhật ký sự kiện), các hoạt động gốc là những mục cấp cao nhất.

Xem thẻ Cây lệnh gọi để biết ví dụ về hoạt động gốc.

Thẻ Call tree (Cây lệnh gọi)

Sử dụng thẻ Call tree (Cây lệnh gọi) để xem hoạt động gốc nào gây ra nhiều công việc nhất.

Thẻ Call tree (Cây lệnh gọi) chỉ hiển thị các hoạt động trong phần đã chọn của bản ghi. Xem phần Chọn một phần của bản ghi để tìm hiểu cách chọn các phần.

Trong ví dụ này, các mục cấp cao nhất trong cột Hoạt động, chẳng hạn như Event, Paint và Composite Layers là các hoạt động gốc. Cấu trúc lồng nhau thể hiện ngăn xếp lệnh gọi. Trong ví dụ này, Event gây ra Function Call, gây ra button.addEventListener, gây ra b, v.v.

Thời gian tự thực hiện thể hiện thời gian trực tiếp dành cho hoạt động đó. Tổng thời gian biểu thị thời gian dành cho hoạt động đó hoặc bất kỳ hoạt động con nào của hoạt động đó.

Nhấp vào Self Time (Thời gian tự thực hiện), Total Time (Tổng thời gian) hoặc Activity (Hoạt động) để sắp xếp bảng theo cột đó.

Sử dụng hộp Bộ lọc để lọc sự kiện theo tên hoạt động.

Theo mặc định, trình đơn Grouping (Nhóm) được đặt thành No Grouping (Không nhóm). Sử dụng trình đơn Nhóm để sắp xếp bảng hoạt động dựa trên nhiều tiêu chí.

Thẻ Từ dưới lên

Sử dụng thẻ Bottom-up (Từ dưới lên) để xem những hoạt động nào trực tiếp chiếm nhiều thời gian nhất.

Thẻ Bottom-up (Từ dưới lên) chỉ hiển thị các hoạt động trong phần đã chọn của bản ghi. Xem phần Chọn một phần của bản ghi để tìm hiểu cách chọn các phần.

Trong biểu đồ hình ngọn lửa của Main (Chính) trong ví dụ này, bạn có thể thấy rằng hầu hết thời gian đều được dùng để thực thi 3 lệnh gọi đến wait(). Theo đó, hoạt động hàng đầu trong thẻ Bottom-up (Từ dưới lên) là wait. Trong biểu đồ hình ngọn lửa, phần màu vàng bên dưới các lệnh gọi đến wait thực ra là hàng nghìn lệnh gọi Minor GC. Theo đó, bạn có thể thấy trong thẻ Bottom-up (Từ dưới lên), hoạt động tốn kém nhất tiếp theo là Minor GC.

Cột Thời gian tự thực hiện biểu thị tổng thời gian đã chi tiêu trực tiếp cho hoạt động đó, trên tất cả các lần xuất hiện của hoạt động.

Cột Tổng thời gian thể hiện tổng thời gian dành cho hoạt động đó hoặc bất kỳ hoạt động con nào của hoạt động đó.

Bảng ngăn xếp nặng nhất

Ở bên phải thẻ Call tree (Cây lệnh gọi) hoặc Bottom-up (Từ dưới lên), hãy nhấp vào right_panel_open Show heaviest stack (Hiện ngăn xếp nặng nhất) để hiển thị bảng Heaviest stack (Ngăn xếp nặng nhất).

Bảng này cho bạn biết hoạt động con nào của hoạt động đã chọn mất nhiều thời gian nhất để thực thi. Di chuột qua một mục trong bảng để xem sự kiện tương ứng được làm nổi bật trong kênh Main (Chính) và phần còn lại bị làm mờ.

Bằng cách này, bạn có thể tìm thấy trực quan trong dấu vết hiệu suất các hoạt động lồng nhau từ ngăn xếp lệnh gọi mất nhiều thời gian nhất.

Thẻ Nhật ký sự kiện

Sử dụng thẻ Nhật ký sự kiện để xem các hoạt động theo thứ tự diễn ra trong quá trình ghi.

Thẻ Nhật ký sự kiện chỉ hiển thị các hoạt động trong phần đã chọn của bản ghi. Hãy xem phần Chọn một phần của bản ghi âm để tìm hiểu cách chọn các phần.

Cột Start Time (Thời gian bắt đầu) thể hiện thời điểm bắt đầu hoạt động đó, tương ứng với thời điểm bắt đầu ghi. Thời gian bắt đầu của 1573.0 ms cho mục đã chọn trong ví dụ này có nghĩa là hoạt động bắt đầu sau 1573 mili giây kể từ khi bắt đầu ghi.

Cột Thời gian tự xử lý biểu thị thời gian dành trực tiếp cho hoạt động đó.

Cột Tổng thời gian biểu thị thời gian dành trực tiếp cho hoạt động đó hoặc cho bất kỳ hoạt động con nào của hoạt động đó.

Nhấp vào Start Time (Thời gian bắt đầu), Self Time (Thời gian tự thực hiện) hoặc Total Time (Tổng thời gian) để sắp xếp bảng theo cột đó.

Sử dụng hộp Bộ lọc để lọc các hoạt động theo tên.

Sử dụng trình đơn Duration (Thời lượng) để lọc ra mọi hoạt động mất ít hơn 1 mili giây hoặc 15 mili giây. Theo mặc định, trình đơn Duration (Thời lượng) được đặt thành All (Tất cả), nghĩa là tất cả hoạt động đều được hiển thị.

Tắt hộp đánh dấu Đang tải, Tập lệnh, Kết xuất hoặc Vẽ để lọc tất cả hoạt động khỏi các danh mục đó.

Xem các điểm đánh dấu hiệu suất

Trong lớp phủ có các đường dọc trên dấu vết hiệu suất, bạn có thể thấy các điểm đánh dấu hiệu suất quan trọng, chẳng hạn như:

• Nội dung đầu tiên hiển thị (FCP)
• Nội dung lớn nhất hiển thị (LCP)
• Sự kiện DOMContentLoaded (DCL)
• Sự kiện tải (L)

Di chuột lên tên điểm đánh dấu ở cuối dấu vết để xem dấu thời gian của điểm đánh dấu.

Xem thời gian tuỳ chỉnh

Trên kênh Thời gian, hãy xem các điểm đánh dấu hiệu suất tuỳ chỉnh, chẳng hạn như:

• performance.mark() cuộc gọi. Một điểm đánh dấu riêng lẻ có chú giải công cụ được hiển thị bên dưới ở mức 813,44 mili giây, có nhãn Bắt đầu chạy JavaScript.
• performance.measure() cuộc gọi. Một khoảng màu vàng được hiển thị bên dưới, có nhãn Tương tác chậm.

Chọn một điểm đánh dấu để xem thêm thông tin chi tiết trong thẻ Tóm tắt, bao gồm dấu thời gian, tổng thời gian, thời gian tự thực hiện và đối tượng detail. Đối với các lệnh gọi performance.mark() và performance.measure(), thẻ này cũng cho thấy dấu vết ngăn xếp.

Xem lượt tương tác

Xem hoạt động tương tác của người dùng trên kênh Tương tác để theo dõi các vấn đề tiềm ẩn về khả năng phản hồi.

Cách xem các lượt tương tác:

1. Mở Công cụ cho nhà phát triển, ví dụ: trên trang minh hoạ này.
2. Mở bảng điều khiển Hiệu suất rồi bắt đầu ghi.
3. Nhấp vào một phần tử (cà phê) rồi dừng ghi.
4. Tìm kênh Lượt tương tác trong dòng thời gian.

Trong ví dụ này, kênh Interactions (Tương tác) cho thấy hoạt động tương tác Pointer (Con trỏ). Các hoạt động tương tác có râu cho biết độ trễ đầu vào và độ trễ trình bày tại các ranh giới thời gian xử lý. Di chuột qua lượt tương tác để xem chú giải công cụ có độ trễ đầu vào, thời gian xử lý và độ trễ hiển thị.

Đường Tương tác cũng cho thấy cảnh báo Lượt tương tác đến nội dung hiển thị tiếp theo (INP) cho những lượt tương tác dài hơn 200 mili giây trong thẻ Tóm tắt và trong một chú thích khi di chuột:

Bản nhạc Tương tác đánh dấu các lượt tương tác trong hơn 200 mili giây bằng một hình tam giác màu đỏ ở góc trên cùng bên phải.

Xem các thay đổi về bố cục

Xem các thay đổi về bố cục trên kênh Layout shifts (Thay đổi bố cục). Ca làm việc xuất hiện dưới dạng hình thoi màu tím và được nhóm thành cụm (đường màu tím) dựa trên khoảng cách của các ca làm việc trên dòng thời gian.

Để làm nổi bật một phần tử gây ra sự thay đổi bố cục trong khung nhìn, hãy di chuột lên hình thoi tương ứng.

Để xem thêm thông tin về một hoặc nhiều thay đổi bố cục trong thẻ Tóm tắt cùng với thời gian, điểm số, phần tử và nguyên nhân tiềm ẩn, hãy nhấp vào hình thoi hoặc cụm tương ứng.

Để biết thêm thông tin, hãy xem bài viết Mức thay đổi bố cục tích luỹ (CLS).

Xem ảnh động

Xem ảnh động trên dải Ảnh động. Ảnh động được đặt tên là các thuộc tính hoặc phần tử CSS tương ứng (nếu có), ví dụ: transform hoặc my-element. Ảnh động không kết hợp được đánh dấu bằng hình tam giác màu đỏ ở góc trên cùng bên phải.

Chọn một ảnh động để xem thêm thông tin chi tiết trong thẻ Tóm tắt, bao gồm cả lý do khiến quá trình kết hợp thất bại.

Xem hoạt động của GPU

Xem hoạt động của GPU trong phần GPU.

Xem hoạt động trên tệp raster

Xem hoạt động của đồ hoạ raster trong phần Nhóm luồng.

Phân tích số khung hình/giây (FPS)

Công cụ cho nhà phát triển cung cấp nhiều cách để phân tích số khung hình/giây:

• Sử dụng phần Khung để xem thời gian của một khung hình cụ thể.
• Sử dụng đồng hồ đo FPS để ước tính FPS theo thời gian thực khi trang chạy. Xem Xem số khung hình/giây theo thời gian thực bằng đồng hồ đo FPS.

Mục Frames (Khung)

Mục Frames (Khung hình) cho bạn biết chính xác thời gian cần để kết xuất một khung hình cụ thể.

Di chuột qua một khung để xem chú giải công cụ có thêm thông tin về khung đó.

Ví dụ này cho thấy một chú giải công cụ khi bạn di chuột qua một khung.

Mục Frames (Khung) có thể cho thấy 4 loại khung:

1. Khung ở trạng thái rảnh (màu trắng). Không có thay đổi nào.
2. Khung (màu xanh lục). Kết xuất như dự kiến và đúng thời gian.
3. Khung hiện diện một phần (màu vàng với hoạ tiết đường nét đứt thưa và rộng). Chrome đã cố gắng hết sức để hiển thị ít nhất một số nội dung cập nhật trực quan kịp thời. Ví dụ: trong trường hợp công việc của luồng chính của quy trình kết xuất (ảnh động canvas) bị trễ nhưng luồng của trình kết hợp (thao tác cuộn) vẫn đúng giờ.
4. Rớt khung hình (màu đỏ có mẫu đường liền nét dày đặc). Chrome không thể kết xuất khung hình trong khoảng thời gian hợp lý.

Ví dụ này cho thấy một chú giải công cụ khi bạn di chuột qua một khung hình được trình bày một phần.

Nhấp vào một khung hình để xem thêm thông tin về khung hình đó trong thẻ Summary (Tóm tắt). Công cụ cho nhà phát triển sẽ phác thảo khung đã chọn bằng màu xanh dương.

Xem yêu cầu mạng

Mở rộng mục Mạng để xem thác nước của các yêu cầu mạng xảy ra trong quá trình ghi lại hiệu suất.

Bên cạnh tên của bản nhạc Mạng, có một chú thích với các loại yêu cầu được mã hoá bằng màu.

Các yêu cầu chặn hiển thị được đánh dấu bằng hình tam giác màu đỏ ở góc trên bên phải.

Di chuột qua một yêu cầu để xem chú thích có:

• URL của yêu cầu và tổng thời gian thực hiện yêu cầu đó.
• Mức độ ưu tiên hoặc thay đổi mức độ ưu tiên, ví dụ: Medium -> High.
• Liệu yêu cầu có phải là Render-blocking hay không.
• Bảng chi tiết về thời gian yêu cầu, được mô tả sau.

Khi bạn nhấp vào một yêu cầu, kênh Mạng sẽ vẽ một mũi tên từ trình khởi tạo đến yêu cầu đó.

Ngoài ra, bảng điều khiển Hiệu suất còn cho bạn thấy thẻ Tóm tắt, trong đó có thêm thông tin về yêu cầu, bao gồm nhưng không giới hạn ở các trường Mức độ ưu tiên ban đầu và Mức độ ưu tiên (cuối cùng). Nếu các giá trị này khác nhau, thì mức độ ưu tiên tìm nạp của yêu cầu đã thay đổi trong quá trình ghi. Để biết thêm thông tin, hãy xem bài viết Tối ưu hoá việc tải tài nguyên bằng Fetch Priority API.

Thẻ Tóm tắt cũng cho biết thông tin chi tiết về thời gian của yêu cầu.

Trong ví dụ này, yêu cầu về www.google.com được biểu thị bằng một đường ở bên trái (|–), một thanh ở giữa có phần tối và phần sáng, và một đường ở bên phải (–|).

Nếu có, thẻ Tóm tắt cũng cho thấy thông tin chi tiết về thời gian của máy chủ cho các yêu cầu mạng triển khai công nghệ kết xuất phía máy chủ. Đối với các yêu cầu này, bảng điều khiển Hiệu suất sẽ lấy dữ liệu từ tiêu đề phản hồi Server-Timing.

Bạn có thể xem thông tin chi tiết về thời gian khác trong thẻ Mạng. Nhấp chuột phải vào yêu cầu trong dấu vết Mạng hoặc URL của yêu cầu đó trong thẻ Tóm tắt rồi nhấp vào Hiện trong bảng điều khiển Mạng. Công cụ cho nhà phát triển sẽ đưa bạn đến bảng điều khiển Mạng và chọn yêu cầu tương ứng. Mở thẻ Thời gian của yêu cầu đó.

Sau đây là cách hai bảng chi tiết này liên kết với nhau:

• Dòng bên trái (|–) là mọi thứ cho đến nhóm sự kiện Connection start, bao gồm cả nhóm sự kiện này. Nói cách khác, đó là mọi thứ trước Request Sent.
• Phần sáng của thanh là Request sent và Waiting for server response.
• Phần tối của thanh này là Content download.
• Đường bên phải (–|) là thời gian chờ luồng chính. Thẻ Network (Mạng) > Timing (Thời gian) không hiển thị thông tin này.

Xem các chỉ số về bộ nhớ

Chọn hộp đánh dấu Bộ nhớ để xem các chỉ số về bộ nhớ của bản ghi gần đây nhất.

Công cụ cho nhà phát triển sẽ hiển thị biểu đồ Bộ nhớ mới, phía trên thẻ Tóm tắt. Ngoài ra, còn có một biểu đồ mới bên dưới biểu đồ NET, được gọi là HEAP. Biểu đồ HEAP cung cấp thông tin giống như dòng JS Heap trong biểu đồ Memory (Bộ nhớ).

Ví dụ này cho thấy các chỉ số về bộ nhớ ở phía trên thẻ Tóm tắt.

Các đường màu trên biểu đồ tương ứng với các hộp đánh dấu có màu phía trên biểu đồ. Bỏ đánh dấu hộp để ẩn danh mục đó khỏi biểu đồ.

Biểu đồ chỉ hiển thị vùng của bản ghi được chọn. Trong ví dụ trước, biểu đồ Bộ nhớ chỉ cho thấy mức sử dụng bộ nhớ cho thời điểm bắt đầu ghi, cho đến khoảng mốc 1000 mili giây.

Xem thời lượng của một phần trong bản ghi âm

Khi phân tích một phần như Mạng hoặc Chính, đôi khi bạn cần ước tính chính xác hơn về thời gian diễn ra một số sự kiện nhất định. Giữ phím Shift, nhấp và giữ, rồi kéo sang trái hoặc phải để chọn một phần của bản ghi. Ở cuối phần bạn chọn, Công cụ cho nhà phát triển sẽ cho biết thời lượng của phần đó.

Trong ví dụ này, dấu thời gian 488.53ms ở cuối phần được chọn cho biết thời gian thực hiện phần đó.

Xem ảnh chụp màn hình

Hãy xem phần Chụp ảnh màn hình trong khi ghi để tìm hiểu cách bật tính năng chụp ảnh màn hình.

Di chuột qua Tổng quan về dòng thời gian để xem ảnh chụp màn hình về giao diện của trang tại thời điểm đó trong bản ghi. Tổng quan về dòng thời gian là phần chứa các biểu đồ CPU, FPS và NET.

Bạn cũng có thể xem ảnh chụp màn hình bằng cách nhấp vào một khung hình trong phần Frames (Khung hình). DevTools hiển thị một phiên bản nhỏ của ảnh chụp màn hình trong thẻ Tóm tắt.

Ví dụ này cho thấy ảnh chụp màn hình của khung 195.5ms trong thẻ Summary (Tóm tắt) khi bạn nhấp vào khung đó trong phần Frames (Khung).

Nhấp vào hình thu nhỏ trong thẻ Tóm tắt để phóng to ảnh chụp màn hình.

Ví dụ này cho thấy ảnh chụp màn hình được phóng to sau khi bạn nhấp vào hình thu nhỏ của ảnh đó trong thẻ Tóm tắt.

Xem thông tin về các lớp

Cách xem thông tin nâng cao về các lớp của một khung hình:

1. Bật tính năng đo lường nâng cao cho hoạt động kết xuất.
2. Chọn một khung trong mục Khung. Công cụ cho nhà phát triển hiển thị thông tin về các lớp của công cụ này trong thẻ Lớp mới, bên cạnh thẻ Nhật ký sự kiện.

Di chuột qua một lớp để làm nổi bật lớp đó trong sơ đồ.

Ví dụ này cho thấy lớp #39 được làm nổi bật khi bạn di chuột qua lớp đó.

Cách di chuyển biểu đồ:

• Nhấp vào Chế độ lia máy để di chuyển dọc theo trục X và Y.
• Nhấp vào Chế độ xoay để xoay dọc theo trục Z.
• Nhấp vào Đặt lại phép biến đổi để đặt lại biểu đồ về vị trí ban đầu.

Xem cách hoạt động của tính năng phân tích lớp:

Xem trình phân tích tài nguyên vẽ

Cách xem thông tin nâng cao về một sự kiện hiển thị:

1. Bật tính năng đo lường nâng cao cho hoạt động kết xuất.
2. Chọn một sự kiện Paint (Vẽ) trong kênh Main (Chính).

Phân tích hiệu suất kết xuất bằng thẻ Kết xuất

Sử dụng các tính năng của thẻ Rendering (Hiển thị) để giúp hình dung hiệu suất hiển thị của trang.

Mở thẻ Rendering (Hiển thị).

Xem số khung hình/giây theo thời gian thực bằng đồng hồ đo FPS

Số liệu thống kê về việc kết xuất khung hình là một lớp phủ xuất hiện ở góc trên cùng bên phải của khung nhìn. Công cụ này cung cấp thông tin ước tính theo thời gian thực về FPS khi trang chạy.

Xem Số liệu thống kê kết xuất khung hình.

Xem các sự kiện vẽ theo thời gian thực bằng tính năng Nhấp nháy khi vẽ

Sử dụng Paint Flashing (Đánh dấu sự kiện kết xuất) để xem tất cả các sự kiện kết xuất trên trang theo thời gian thực.

Xem phần Nhấp nháy khi vẽ.

Xem lớp phủ của các lớp bằng tính năng Đường viền lớp

Sử dụng Layer Borders (Đường viền lớp) để xem lớp phủ của đường viền lớp và ô ở đầu trang.

Xem phần Đường viền lớp.

Tìm vấn đề về hiệu suất cuộn theo thời gian thực

Sử dụng Vấn đề về hiệu suất cuộn để xác định các phần tử của trang có trình nghe sự kiện liên quan đến thao tác cuộn có thể gây hại cho hiệu suất của trang. Công cụ cho nhà phát triển sẽ phác thảo các phần tử có thể có vấn đề bằng màu xanh mòng két.

Xem phần Vấn đề về hiệu suất cuộn.