Công cụ của Chrome cho nhà phát triển: Tạo hồ sơ CPU JavaScript trong Chrome 58

Trong Chrome 58, hiện là Canary, bảng điều khiển Dòng thời gian đã được đổi tên thành bảng điều khiển Hiệu suất, bảng điều khiển Hồ sơ được đổi tên thành bảng điều khiển Bộ nhớ và tính năng Ghi hồ sơ CPU JavaScript trên bảng điều khiển Hồ sơ đã được chuyển đến một vị trí ẩn hơn.

Mục tiêu dài hạn là xoá Trình phân tích CPU của JavaScript cũ và giúp mọi người làm việc với quy trình công việc mới.

Hướng dẫn di chuyển nhỏ này cho bạn biết cách ghi lại hồ sơ JS trong bảng điều khiển Hiệu suất và cách liên kết giao diện người dùng của bảng điều khiển Hiệu suất với quy trình công việc cũ mà bạn đã quen thuộc.

Truy cập vào trình phân tích CPU JavaScript cũ

Nếu muốn quy trình công việc "Record JavaScript CPU Profile" (Ghi lại hồ sơ CPU JavaScript) cũ từng có trên bảng điều khiển Hồ sơ, bạn vẫn có thể truy cập như sau:

  1. Mở trình đơn chính của Công cụ cho nhà phát triển.
  2. Chọn Công cụ khác > Trình phân tích tài nguyên JavaScript. Trình phân tích tài nguyên cũ sẽ mở trong một bảng điều khiển mới có tên là Trình phân tích tài nguyên JavaScript.

Cách ghi lại hồ sơ JS

  1. Mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Hiệu suất.

    Bảng điều khiển Hiệu suất của Chrome Công cụ cho nhà phát triển

    Hình 1 Bảng điều khiển Hiệu suất.

  3. Ghi hình theo một trong những cách sau:

    • Để phân tích tải trang, nhấp vào Ghi lại tải trang. Công cụ cho nhà phát triển tự động bắt đầu quá trình ghi, sau đó tự động dừng khi phát hiện thấy trang đã tải xong.
    • Để phân tích tài nguyên cho một trang đang chạy, hãy nhấp vào Record (Ghi lại), thực hiện các hành động bạn muốn phân tích tài nguyên, sau đó nhấp vào Stop (Dừng) khi bạn hoàn tất.

Cách quy trình làm việc cũ ánh xạ đến quy trình mới

Từ chế độ xem Biểu đồ của quy trình công việc cũ, ảnh chụp màn hình bên dưới cho bạn thấy vị trí của biểu đồ tổng quan về mức sử dụng CPU (mũi tên trên cùng) và biểu đồ hình ngọn lửa (mũi tên dưới cùng) trong quy trình mới.

Liên kết giữa biểu đồ hình ngọn lửa trong quy trình làm việc cũ và quy trình mới.

Hình 2. Liên kết giữa biểu đồ hình ngọn lửa trong quy trình làm việc cũ (bên trái) và quy trình mới (bên phải).

Chế độ xem Nặng (Từ dưới lên) có trong thẻ Từ dưới lên:

Liên kết giữa chế độ xem Từ dưới lên trong quy trình làm việc cũ và quy trình mới.

Hình 3. Liên kết giữa chế độ xem Từ dưới lên trong quy trình làm việc cũ (bên trái) và quy trình làm việc mới (bên phải).

Và chế độ xem Cây (Từ trên xuống) có sẵn trong thẻ Cây cuộc gọi:

Liên kết giữa Chế độ xem dạng cây trong quy trình làm việc cũ và quy trình mới.

Hình 4. Liên kết giữa Chế độ xem dạng cây trong quy trình làm việc cũ (bên trái) và quy trình làm việc mới (bên phải).