Công cụ của Chrome cho nhà phát triển – Phân tích CPU JavaScript trong Chrome 58

Kayce Basques

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 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 Hồ sơ đã được chuyển đến một vị trí ẩn hơn.

Mục tiêu về lâu dài 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 chỉ cho bạn 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 "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 Công cụ của Chrome cho nhà phát triển.
    Hình 1. Bảng 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 công 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 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 công việc cũ (bên trái) và quy trình mới (bên phải).

Hãy ping @ChromeDevTools trên Twitter hoặc mở một vấn đề trên GitHub trong kho lưu trữ tài liệu của chúng tôi nếu chúng tôi bỏ lỡ bất kỳ tính năng nào hoặc nếu bạn có câu hỏi nào khác về bài viết này.