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

Tiếng Kayce Basques
Kayce Basques
Twitter GitHub Sự cố

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 lại hồ sơ CPU JavaScript trên bảng điều khiển Hồ sơ đã được chuyển sang một vị trí ẩn hơn.

Mục tiêu dài hạn là xoá Trình phân tích CPU JavaScript cũ và giúp mọi người làm việc với quy trình làm 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 giao diện người dùng của bảng điều khiển Hiệu suất ánh xạ đến 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 "Ghi lại hồ sơ CPU JavaScript" cũ từng có sẵn 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ở ra trong một bảng điều khiển mới có tên là Trình phân tích 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ông cụ của Chrome cho nhà phát triển.
    Hình 1. Bảng điều khiển Hiệu suất.

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

    • Để lập hồ sơ tải trang, hãy nhấp vào Ghi lại tải trang. Công cụ cho nhà phát triển sẽ tự động bắt đầu ghi, sau đó tự động dừng khi phát hiện trang đã tải xong.
    • Để lập hồ sơ một trang đang chạy, hãy nhấp vào Record (Ghi), thực hiện thao tác mà bạn muốn lập hồ sơ, 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ũ liên kết với 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.

Ánh xạ giữa biểu đồ hình ngọn lửa trong quy trình làm việc cũ và quy trình làm việc 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 làm việc mới (bên phải).

Chế độ xem Nặng (Từ dưới lên) xuất hiện 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 làm việc 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).

Còn chế độ xem Cây (Từ trên xuống) có 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 làm việc 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).

Ping @ChromeDevTools trên Twitter hoặc mở một vấn đề về GitHub trên 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.