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

Trang này cung cấp thông tin tham khảo toàn diện về các tính năng của Công cụ của Chrome cho nhà phát triển liên quan đến việc phân tích hiệu suất.

Hãy xem phần 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 Công cụ của Chrome cho nhà phát triển.

Ghi lại hiệu suất

Bạn có thể ghi lại thời gian chạy hoặc hiệu suất tải.

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ì đang tải.

1. Truy cập vào trang bạn muốn phân tích.
2. Nhấp vào thẻ Hiệu suất trong DevTools.

3. Nhấp vào biểu tượng Ghi .

   

4. Tương tác với trang. 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 lại vào Record (Quay) hoặc nhấp vào Stop (Dừng) để dừng quay.

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 khi trang đó đang tải, thay vì đang 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 Bắt đầu lập hồ sơ và tải lại trang . Trước tiên, DevTools 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 trang tải lại, sau đó tự động dừng ghi vài giây sau khi tải xong.

   

Công cụ cho nhà phát triển sẽ tự động phóng to phần bản ghi có nhiều hoạt động nhất.

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 quay

Đánh dấu vào hộp Ảnh chụp màn hình để chụp ảnh màn hình của từng khung hình trong khi quay.

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 quay

Trong khi ghi một trang, hãy nhấp vào Thu gom rác chổi để buộc thu gom rác.

Hiện các chế độ cài đặt ghi

Nhấp vào biểu tượng Capture settings (Cài đặt bản ghi) để hiển thị các chế độ cài đặt khác liên quan đến cách DevTools ghi lại hiệu suất.

Tắt mẫu JavaScript

Theo mặc định, kênh Chính của bản ghi 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 Cài đặt chụp . Xem phần Hiển thị chế độ cài đặt bản ghi.
2. Bật hộp kiểm Disable JavaScript Samples (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. Phiên bản ghi Main (Chính) ngắn hơn nhiều khi tính năng lấy mẫu bị tắt, vì phiên bản này bỏ qua tất cả ngăn xếp lệnh gọi JavaScript.

Ví dụ này cho thấy bản ghi với các mẫu JS bị tắt.

Ví dụ này cho thấy một bản ghi có mẫu JS đã 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 thị chế độ cài đặt ghi.
2. Đặt Mạng thành mức điều tiết đã chọn.

Điều tiết CPU trong khi quay

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.
2. Đặt CPU ở mức điều tiết đã chọn.

Chế độ điều tiết có liên quan đến khả năng của máy tính. Ví dụ: tuỳ chọn giảm tốc độ gấp 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. Công cụ cho nhà phát triển không thể thực sự mô phỏng CPU của thiết bị di động vì kiến trúc của thiết bị di động rất khác với kiến trúc của máy tính để bàn và máy tính xách tay.

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

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

1. Mở trình đơn Cài đặt chụp . Xem phần Hiển thị chế độ cài đặt bản ghi.
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 chi tiết, hãy xem cách Phân tích hiệu suất của bộ chọn CSS trong quá trình Tính toán lại các sự kiện Kiểu.

Bật khả năng đo lường bản vẽ nâng cao

Cách xem thông tin đo lường chi tiết về bản vẽ:

1. Mở trình đơn Cài đặt chụp . Xem phần Hiển thị chế độ cài đặt bản ghi.
2. Chọn hộp kiểm Bật khả năng đo lường vẽ nâng cao.

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

Mô phỏng tính năng đồng thời phần cứng

Để kiểm thử hiệu suất của ứng dụng với nhiều số lượng nhân xử lý, bạn có thể định cấu hình giá trị do thuộc tính navigator.hardwareConcurrency báo cáo. Một số ứng dụng dùng thuộc tính này để kiểm soát mức độ song song của ứng dụng, chẳng hạn như để kiểm soát kích thước nhóm pthread của Emscripten.

Cách mô phỏng tính năng đồng thời phần cứng:

1. Mở trình đơn Cài đặt chụp . Xem phần Hiển thị chế độ cài đặt ghi.
2. Đánh dấu vào Hardware concurrency (Đồng thời phần cứng) rồi đặt số lượng lõi trong hộp nhập.

Công cụ cho nhà phát triển hiển thị biểu tượng cảnh báo bên cạnh thẻ Hiệu suất để nhắc bạn rằng tính năng mô phỏng đồng thời phần cứng đã được bật.

Để chuyển về giá trị mặc định 10, hãy nhấp vào nút Huỷ bỏ .

Lưu bản ghi

Để lưu bản ghi, hãy nhấp chuột phải rồi chọn Lưu hồ sơ.

Tải bản ghi

Để tải bản ghi, hãy nhấp chuột phải rồi chọn Load Profile (Tải hồ sơ).

Xoá bản ghi trước

Sau khi ghi, hãy nhấn vào biểu tượng 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.

Thao tác trong bản ghi

Để 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ỏ, cũng như sử dụng đường dẫn để chuyển đổi giữa các mức thu phóng.

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

Trong thanh thao tác của bảng Hiệu suất và ở đầu bản ghi, bạn có thể thấy mục Tổng quan về tiến trình với 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 phải trên Tổng quan về tiến trình.

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

1. Đặt tiêu điểm vào kênh Main (Chính) hoặc bất kỳ kênh nào lân cậ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 mục Tổng quan về dòng thời gian hoặc bất kỳ kênh nào (Main và các kênh phụ).
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 breadcrumb (tập hợp liên kết phân cấp) 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 đường dẫn lồng nhau liên tiếp, tăng mức thu phóng và sau đó tự do chuyển đổi giữa các mức thu phóng.

Cách tạo và sử dụng breadcrumb (tập hợp liên kết phân cấp):

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 đã chọ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 để điền vào mục Tổng quan về dòng thời gian. Một chuỗi breadcrumb (tập hợp liên kết phân cấp) bắt đầu tạo ở đầu phần Tổng quan về dòng thời gian.
3. Lặp lại hai bước trước đó để tạo một breadcrumb (tập hợp liên kết phân cấp) khác. Bạn có thể tiếp tục lồng các đường dẫn 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 phần Tổng quan về dòng thời gian.

Để xoá các phần tử con của một breadcrumb, hãy nhấp chuột phải vào breadcrumb mẹ rồi chọn Xoá breadcrumb 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 bản nhạc Chính hoặc bất kỳ biểu đồ lân cận nào, hãy nhấp và giữ, sau đó kéo theo bất kỳ hướng nào cho đến khi nội dung bạn đang tìm xuất hiện.

Hoạt động tìm kiếm

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

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

• macOS: Command+F
• Windows, Linux: Ctrl+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 tìm kiếm hoạt động bất kỳ bắt đầu bằng E.

Cách chuyển đổi giữa các hoạt động khớ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 Hiệu suất hiển thị một chú thích cho hoạt động đã 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 match_case Match case (Khớp chữ hoa chữ thường) để 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 một biểu thức chính quy trong truy vấn của bạ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

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

Cách di chuyển và ẩn bản nhạc:

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

Xem video để xem quy trình này hoạt động như thế nào.

Bảng điều khiển Hiệu suất sẽ 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 DevTools tiếp theo.

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

Sử dụng kênh 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. Bảng điều khiển Hiệu suất sẽ vẽ đường viền sự kiện đã chọn bằng màu xanh dương.

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

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

Bảng Hiệu suất thể hiện hoạt động của luồng chính trong biểu đồ hình ngọn lửa. Trục x thể hiện 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 cùng 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 kênh Chính. Sự kiện click đã gây ra một lệnh gọi hàm ẩn danh. Hàm này lần lượt gọi onEndpointClick_, hàm này gọi handleClick_, v.v.

Bảng điều khiển Hiệu suất gán màu ngẫu nhiên cho các tập lệnh để chia nhỏ 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. Cuộc 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 biểu thị hoạt động viết tập lệnh, còn sự kiện màu tím biểu thị hoạt động kết xuất. Các sự kiện màu vàng và màu tím đậm hơn này nhất quán trên tất cả bản ghi.

Các công việc dài cũng được đánh dấu bằng hình tam giác màu đỏ và với phần hơn 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 biểu thị 350 mili giây qua sẽ được tô màu đỏ, trong khi 50 mili giây ban đầu thì không.

Ngoài ra, kênh Main (Chính) cho biết thông tin về các hồ sơ CPU bắt đầu và dừng bằng các hàm bảng điều khiển profile() và profileEnd().

Để ẩn biểu đồ 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 mẫu JS bị tắt, bạn sẽ 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

Đường dẫn 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:

• Kiểu hoặc bố cục không hợp lệ -> Tính toán lại kiểu hoặc Bố cục
• Yêu cầu khung ảnh động -> Khung ảnh động đã kích hoạt
• Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Kích hoạt lệnh gọi lại ở trạng thái rảnh
• Install Timer (Cài đặt bộ hẹn giờ) -> 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

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

Khi được chọn, thẻ Tóm tắt sẽ hiển thị các đường liên kết Đối tượng khởi tạo cho đối tượng khởi tạo và các đường liên kết Được khởi tạo bởi cho các sự kiện mà đối tượng khởi tạo đó gây ra. Hãy nhấp vào các sự kiện đó để 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

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

1. Trong kênh 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 tuỳ chọn sau hoặc nhấn phím tắt tương ứng:

   • Ẩn hàm (H)
   • Ẩn phần tử con (C)
   • Ẩn các phần tử con lặp lại (R)
   • Đặt lại phần tử 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 phần tử con bị ẩn.

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

   

3. Để đặt lại một hàm có phần tử 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 phím U hoặc nhấp chuột phải vào một hàm bất kỳ rồi chọn Đặt lại dấu vết tương ứng.

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 đồ sẽ thu gọn các tập lệnh bị bỏ qua, đánh dấu các tập lệnh đó là Trên danh sách bỏ qua và thêm các tập lệnh đó vào quy tắc Loại trừ tuỳ chỉnh trong phần cài đặt Cài đặt > Danh sách bỏ qua. Các tập lệnh đã 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 kênh 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 khung hiển thị cung cấp cho bạn một góc nhìn khác nhau về hoạt động:

• Khi bạn muốn xem các hoạt động gốc dẫn đến nhiều công việc nhất, hãy sử dụng thẻ Cây cuộc gọi.
• Khi bạn muốn xem các hoạt động dành nhiều thời gian trực tiếp 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.

Để 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.
• biểu_thức_chính_quy Biểu thức chính quy.
• match_word Khớp toàn bộ từ.

Mỗi chế độ xem dạng bảng trong bảng điều khiển Hiệu suất hiển thị các đường liên kết cho các hoạt động, chẳng hạn 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 nội dung khai báo hàm tương ứng trong tệp nguồn. Ngoài ra, nếu có và bật bản đồ nguồn thích hợp, 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 Sources (Nguồn).

Hoạt động gốc

Dưới đâ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ố hoạt động. Ví dụ: khi bạn nhấp vào một trang, trình duyệt sẽ kích hoạt một hoạt động Event làm hoạt động gốc. Khi đó, 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 nhạc Chính, các hoạt động gốc nằm ở đầu biểu đồ. Trong thẻ Call Tree (Cây gọi điện) và Event Log (Nhật ký sự kiện), hoạt động gốc là các mục cấp cao nhất.

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

Thẻ Cây lệnh gọi

Sử dụng thẻ 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ẻ Cây lệnh gọi chỉ hiển thị các hoạt động trong phần bản ghi đã chọn. Hãy 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ấp cao nhất của các mục trong cột Hoạt động, chẳng hạn như Event, Paint và Composite Layers là các hoạt động gốc. Lồng ghép đại diện cho 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ự hoạt động thể hiện thời gian trực tiếp dành cho hoạt động đó. Tổng thời gian thể hiện 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 Thời gian tự động, Tổng thời gian hoặc Hoạt động để sắp xếp bảng theo cột đó.

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

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

Nhấp vào biểu tượng Hiển thị ngăn xếp nặng nhất để hiển thị một bảng khác ở bên phải bảng Hoạt động. Nhấp vào một hoạt động để điền vào bảng Ngăn xếp nặng nhất. Bảng Ngăn xếp nặng nhất cho bạn biết thành phần con nào của hoạt động đã chọn mất nhiều thời gian thực thi nhất.

Thẻ Từ dưới lên

Sử dụng thẻ Từ dưới lên để xem hoạt động nào trực tiếp chiếm nhiều thời gian tổng hợp 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. Hãy 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 trên thanh Chính của ví dụ này, bạn có thể th��y h��u như toàn bộ thời gian dành cho việc thực thi 3 lệnh gọi đến wait(). Do đó, 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, màu vàng bên dưới các lệnh gọi đến wait thực sự 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ự động thể hiện thời gian tổng hợp dành trực tiếp cho hoạt động đó, trong tất cả các lần diễn ra hoạt động.

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

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ự xảy 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 để tìm hiểu cách chọn các phần.

Cột Thời gian bắt đầu biểu thị thời điểm bắt đầu hoạt động, so 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 1573 mili giây sau khi quá trình ghi bắt đầu.

Cột Thời gian tự thực hiện thể hiện thời gian trực tiếp dành cho hoạt động đó.

Cột Tổng thời gian thể hiện 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 Thời gian bắt đầu, Thời gian tự học hoặc Thời gian tổng cộng để sắp xếp bảng theo cột đó.

Sử dụng hộp Lọc để lọ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 hiển thị.

Tắt hộp đánh dấu Loading (Tải), Scripting (Tập lệnh), Rendering (Hiển thị) hoặc Painting (Vẽ) để lọc ra tất cả hoạt động từ các danh mục đó.

Xem dấu thời gian

Trên kênh Thời gian, hãy xem các điểm đánh dấu quan trọng như:

• Lần vẽ đầu tiên (FP)
• Nội dung đầu tiên hiển thị (FCP)
• Thời gian hiển thị nội dung lớn nhất (LCP)
• Sự kiện DOMContentLoaded (DCL)
• Sự kiện tải (L)
• Các lệnh gọi performance.mark() tuỳ chỉnh của bạn. Một dấu riêng lẻ có chú giải công cụ hiển thị bên dưới ở 813,44 mili giây, được gắn nhãn Starting to run JavaScript (Bắt đầu chạy JavaScript).
• Cuộc gọi performance.measure() tuỳ chỉnh của bạn. Khoảng màu vàng được hiển thị bên dưới, được gắn 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 thi và đối tượng detail. Đối với các lệnh gọi performance.mark() và performance.measure(), thẻ này cũng hiển thị dấu vết ngăn xếp.

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

Xem các 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 lượt tương tác:

1. Ví dụ: Mở Công cụ cho nhà phát triển 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 thành phần (cà phê) rồi dừng quá trình ghi.
4. Tìm kênh Hoạt động tương tác trong dòng thời gian.

Trong ví dụ này, kênh Tương tác cho thấy hoạt động tương tác Con trỏ. Các tương tác có râu cho biết độ trễ đầu vào và trình bày tại ranh giới thời gian xử lý. Di chuột qua hoạt động 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ị.

Theo dõi Số lượt 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) đối với các lượt tương tác dài hơn 200 mili giây trong thẻ Tóm tắt và trong chú giải công cụ khi di chuột qua:

Đường dẫn Số lượt tương tác đánh dấu các lượt tương tác trên 200 mili giây bằng một tam giác màu đỏ ở góc trên cùng bên phải.

Xem hoạt động của GPU

Xem hoạt động của GPU trong mục GPU.

Xem hoạt động quét

Xem hoạt động đường quét 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 mục Khung để xem một khung hình cụ thể mất bao lâu.
• Sử dụng FPS meter (Bộ đo FPS) để ước tính FPS theo thời gian thực khi trang chạy. Xem phần Xem số khung hình/giây theo thời gian thực bằng công cụ đo FPS.

Mục Frames (Khung)

Phần Khung cho bạn biết chính xác thời lượng của một khung hình cụ thể.

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

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

Phần Khung có thể hiển thị 4 loại khung:

1. Khung không hoạt động (màu trắng). Không có thay đổi nào.
2. Khung (xanh lục). Kết xuất như mong đợi và kịp thời.
3. Khung hiện diện một phần (màu vàng với mẫu đường gạch ngang rộng thưa thớt). Chrome đã cố gắng hết sức để hiển thị ít nhất một số nội dung cập nhật về hình ảnh 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 trên canvas) bị trễ nhưng luồng trình kết hợp (cuộn) lại đúng giờ.
4. Khung hình bị rớt (màu đỏ với mẫu đường nét liền đậm). Chrome không thể kết xuất khung hình trong khoảng thời gian hợp lý.

Ví dụ này hiển thị chú thích khi bạn di chuột qua một khung được trình bày một phần.

Nhấp vào một khung để xem thêm thông tin về khung đó trong thẻ Summary (Tóm tắt). DevTools sẽ vẽ đường viền khung đã chọn màu xanh dương.

Xem các yêu cầu về mạng

Mở rộng mục Mạng để xem thác nước 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 kênh Mạng, có một chú giải 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 kết xuất đượ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ú giải công cụ có:

• URL của yêu cầu và tổng thời gian thực thi 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ả ở phần sau.

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

Ngoài ra, bảng điều khiển Hiệu suất sẽ hiển thị cho bạn thẻ Tóm tắt với nhiều thông tin hơn 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 giá trị của chúng 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 API Tìm nạp mức độ ưu tiên.

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

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ó một phần tối và một phần sáng, và một đường ở bên phải (–|).

Bạn có thể xem một bảng chi tiết khác về thời gian trong thẻ Mạng. Nhấp chuột phải vào yêu cầu trong kênh 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ụ dành 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ẻ Timing (Thời gian).

Dưới đâ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à toàn bộ mọi thông tin trong nhóm Connection start sự kiện. 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 là Content download.
• Dòng bên phải (–|) là thời gian chờ luồng chính. Thẻ Network (Mạng) > Timing (Định thời gian) không hiển thị thông tin này.

Xem chỉ số bộ nhớ

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

Công cụ cho nhà phát triển hiển thị một 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ó tên 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 đồ liên kết với các hộp đánh dấu có màu phía trên biểu đồ. Tắt hộp đánh dấu để ẩn danh mục đó khỏi biểu đồ.

Biểu đồ chỉ hiển thị khu vực ghi lại đã được chọn. Trong ví dụ trước, biểu đồ Memory (Bộ nhớ) chỉ cho thấy mức sử dụng bộ nhớ khi bắt đầu ghi, tối đa ở khoảng 1.000 mili giây.

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

Khi phân tích một mục như Mạng hoặc Chính, đôi khi bạn cần số liệu ước tính chính xác hơn về thời lượng của 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 lựa chọn của bạn, Công cụ cho nhà phát triển cho biết thời lượng mà phần đó mất.

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

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

Xem bài viết Chụp ảnh màn hình trong khi quay để tìm hiểu cách bật ảnh chụp màn hình.

Di chuột qua mục Tổng quan về dòng thời gian để xem ảnh chụp màn hình về giao diện của trang trong khoảnh khắc ghi lại. Tổng quan về tiến trình 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 trong mục Frames (Khung). Công cụ cho nhà phát triển 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 chụp màn hình đó trong thẻ Tóm tắt.

Xem thông tin về lớp

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

1. Bật tính năng đo lường vẽ nâng cao.
2. Chọn một khung hình trong phần Khung. DevTools hiển thị thông tin về các lớp trong thẻ Layers (Lớp) mới, bên cạnh thẻ Event Log (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 đánh dấu khi bạn di chuột qua lớp đó.

Cách di chuyển sơ đồ:

• Nhấp vào Chế độ kéo để di chuyển dọc theo trục X và Y.
• Nhấp vào biểu tượng Chế độ xoay để xoay theo trục Z.
• Nhấp vào biểu tượng Đặt lại phép biến đổi để đặt lại sơ đồ 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 vẽ:

1. Bật khả năng đo lường bản vẽ nâng cao.
2. Chọn một sự kiện Paint (Sơn) trong kênh Main.

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ẻ Hiển thị để giúp trực quan hoá hiệu suất kết xuất của trang.

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

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

Số liệu thống kê kết xuất khung 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. Cung cấp số khung hình trên giây ước tính theo thời gian thực 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 Paint nhấp nháy

Sử dụng Hiệu ứng nhấp nháy để xem tất cả các sự kiện vẽ trên trang theo thời gian thực.

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

Xem lớp phủ của các lớp có Đường viền lớp

Sử dụng Đường viền lớp để xem lớp phủ đườ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 việ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 phác thảo các phần tử có khả năng có vấn đề bằng màu xanh két.

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