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

Kayce Basques

Sofia Emelianova

Trang này là tài liệu 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 mà 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 ghi

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

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 quay

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 bàn chải để buộc thu gom rác.

Hiển thị chế độ cài đặt tính năng 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 đá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. 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ó các mẫu JS đã bật.

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

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 bản 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 bản ghi.
2. Đặt CPU thành mức điều tiết đã chọn.

Throttling (giới hạn tốc độ) liên quan đến khả năng của máy tính. Ví dụ: tuỳ chọn làm chậm 2 lần sẽ 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 thực sự CPU của thiết bị di động, vì cấu trúc của thiết bị di động rất khác với cấu 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 các sự kiện Tính toán lại 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. Đánh dấu vào hộp Bật khả năng đo lường bản 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 sử dụng thuộc tính này để kiểm soát mức độ song song của ứng dụng, ví dụ: để kiểm soát kích thước nhóm pthread 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 bản 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 sẽ 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 đang bật.

Để quay lại giá trị mặc định là 10, hãy nhấp vào nút Huỷ .

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.

Khám phá 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, thu phóng và 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

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 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 phần Tổng quan về dòng thời gian hoặc bất kỳ kênh nào (Chính và các kênh 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 cấp độ thu phóng

Tổng quan về tiến trình cho phép bạn tạo nhiều chuỗi liên kết lồng nhau liên tiếp, tăng mức thu phóng, sau đó tự do chuyển đổi 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 đã chọn rồi nhấp vào nút N ms zoom_in (phóng to). Phần đã chọn sẽ mở rộng để lấp đầy Thông tin tổng quan về dòng thời gian. Một chuỗi đường dẫn bắt đầu được tạo ở đầu phần Tổng quan về tiến trình.
3. Lặp lại hai bước trước đó để tạo một đường dẫn lồng nhau khác. Bạn có thể tiếp tục lồng đường dẫn cốm bánh 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 kênh Chính hoặc bất kỳ kênh nào lân cận, hãy nhấp và giữ, sau đó kéo theo hướng bất kỳ cho đến khi bạn thấy biểu đồ mình cầ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 điều khiển 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 mọi hoạt động 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 điều khiển Hiệu suất hiển thị chú giải công cụ trên 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 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ự và ẩn các kênh

Để dọn dẹp dấu vết hiệu suất, bạn có thể thay đổi thứ tự của các kênh và ẩn các kênh không liên quan trong 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 một bản nhạc rồi chọn Định cấu hình bản nhạc.
2. Nhấp vào biểu tượng arrow_upward mũi tên lên hoặc arrow_downward mũi tên xuống để di chuyển một bản nhạc lên hoặc xuống. Nhấp vào visibility_off để ẩn.
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ế độ định cấu hình.

Hãy xem video để thấy quy trình làm việc này trong thực tế.

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 thấy thêm thông tin về sự kiện gọi hàm get trong thẻ Summary (Tóm tắt).

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

Bảng điều khiển 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 gây ra các sự kiện ở dưới.

Ví dụ này cho thấy biểu đồ hình ngọn lửa trong kênh Main (Chính). Sự kiện click đã gây ra 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. 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 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à màu tím đậm hơn này nhất quán trên tất cả bản ghi.

Các tác vụ dài cũng được làm nổi bật bằng hình tam giác màu đỏ và phần trê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 thể hiện 350 mili giây cuối cùng được tô màu đỏ, còn 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 đồ 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 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:

• Lỗi 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 -> 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 một 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 Đố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. Nhấp vào các nút này để chuyển đổi 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ó 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ó 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 bất kỳ hàm nào rồi chọn Reset trace (Đặt lại dấu vết).

Bỏ qua 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ị bỏ qua sẽ được lưu cho đến khi bạn xoá các tập lệnh đó khỏi dấu vết hoặc khỏi Quy tắc loại trừ tuỳ chỉnh.

Xem 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 ba chế độ xem dạng bảng để phân tích hoạt động. Mỗi thành phần hiển thị 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ẻ Từ dưới lên.
• Khi bạn muốn xem các hoạt động theo thứ tự xảy 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.
• regular_expression 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 như lệnh gọi hàm. Để giúp bạn gỡ lỗi, Công cụ dành cho nhà phát triển sẽ tìm các 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, thì Công cụ cho nhà phát triển sẽ tự động tìm thấy các tệp gốc.

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

Lưu ý: Ba phần tiếp theo đều đề cập đến cùng một bản minh hoạ. Bạn có thể tự chạy bản minh hoạ tại Bản minh hoạ thẻ Hoạt động và xem nguồn tại GoogleChrome/devtools-samples/perf/activitytabs.html.

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ẻ Cây lệnh gọi, thẻ Từ dưới lên và phần 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 mộ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 kênh 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à 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ớp lồng nhau đạ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ự học, Thời gian tổng cộng hoặc Hoạt động để sắp xếp bảng theo cột đó.

Sử dụng hộp Lọc để lọ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 Nhóm để sắp xếp bảng hoạt động dựa trên nhiều tiêu chí.

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 phần tử con nào của hoạt động đã chọn mất nhiều thời gian nhất để thực thi.

Thẻ Từ dưới lên

Sử dụng thẻ Từ dưới lên để xem những hoạt động trực tiếp chiếm nhiều thời gian nhất theo tổng hợp.

Thẻ Dưới lên 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 biểu đồ hình ngọn lửa của kênh 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(). 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. Do đó, bạn có thể thấy rằng trong thẻ Bottom-Up (Từ dưới lên), hoạt động tốn kém thứ hai là Minor GC.

Cột Thời gian tự thực hiện thể hiện thời gian tổng hợp được dành 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 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 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.

Cột Start Time (Thời gian bắt đầu) thể hiện thời điểm hoạt động đó bắt đầu, 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ạo tập lệnh), Rendering (Hiển thị) hoặc Painting (Vẽ) để lọc ra tất cả hoạt động trong các danh mục đó.

Xem thời gian

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

• Lần sơn đầu tiên (FP)
• Hiển thị nội dung đầu tiên (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).
• Các lệnh gọi performance.measure() tuỳ chỉnh của bạn. Một span màu vàng xuất hiện bên dưới, có nhãn Slow Interaction (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 hoạt động tương tác của người dùng trên kênh Số lượt 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. 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 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 lượt tương tác có các râu chỉ báo độ trễ đầu vào và trình bày tại các 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 quét trong mục Thread Pool (Bể 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)

Mục Frames (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ú giải công cụ 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.

Mục Frames (Khung) có thể hiển thị 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 (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. Rớt khung hình (màu đỏ với mẫu đường liền nét dày đặc). Chrome không thể kết xuất khung hình trong thời gian hợp lý.

Ví dụ này cho thấy chú giải công cụ khi bạn di chuột qua một khung được hiển thị 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 yêu cầu 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 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 sẽ hiển thị 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 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 phần Tối ưu hoá việc tải tài nguyên bằng API mức độ ưu tiên tìm nạp.

Thẻ Summary (Tóm tắt) cũng cho thấy thông tin chi tiết về thời gian xử lý 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ể tìm thấy 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à tất cả các sự kiện cho đến nhóm sự kiện Connection start, bao gồm cả 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 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 Memory (Bộ nhớ) để xem các chỉ số về bộ nhớ từ bản ghi gần đây nhất.

DevTools hiển thị một biểu đồ Memory (Bộ nhớ) mới, phía trên thẻ Summary (Tóm tắt). Ngoài ra, còn có một biểu đồ mới bên dưới biểu đồ NET (LƯU LƯỢNG) có tên là HEAP (VỤN). 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 có 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 của bản ghi âm đã 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, lên đến khoảng 1000 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 ướ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 bạn chọn, DevTools 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 đã 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 video để tìm hiểu cách bật tính năng chụp ảnh màn hình.

Di chuột qua mục Tổng quan về tiến trình để xem ảnh chụp màn hình về giao diện của trang tại thời điểm đó trong quá trình quay video. Tổng quan về dòng thời gian là phần chứa 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). DevTools hiển thị phiên bản nhỏ của ảnh chụp màn hình trong thẻ Summary (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 khả năng đo lường bản vẽ nâng cao.
2. Chọn một khung 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 làm nổi bật 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 ví dụ về 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 tính năng đo lường bản vẽ nâng cao.
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 bạn hình dung 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. Thuộc tính 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ê về 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 sơn

Sử dụng tính năng Paint Flashing (Bật/tắt nhanh lớp phủ) để xem tất 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 Layer Borders (Đường viền lớp) để xem lớp phủ của đường viền lớp và thẻ thông tin ở đầ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 tính nă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ẽ vạch ra các phần tử có thể có vấn đề bằng màu xanh lục lam.

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