Tính năng mới trong Công cụ cho nhà phát triển (Chrome 64)

Kayce Basques

Chào mừng bạn quay lại! Các tính năng mới sắp ra mắt trong Công cụ của Chrome cho nhà phát triển trong Chrome 64 bao gồm:

Hãy đọc tiếp hoặc xem phiên bản video của các ghi chú phát hành này ở bên dưới.

Trình giám sát hiệu suất

Sử dụng Trình theo dõi hiệu suất để xem thông tin theo thời gian thực về nhiều khía cạnh của hiệu suất tải hoặc thời gian chạy của trang, bao gồm:

  • Mức sử dụng CPU.
  • Dung lượng vùng nhớ khối xếp JavaScript.
  • Tổng số nút DOM, trình nghe sự kiện JavaScript, tài liệu và khung trên trang.
  • Số lần tính toán lại bố cục và kiểu mỗi giây.

Nếu người dùng báo cáo rằng ứng dụng của bạn chạy chậm hoặc giật, hãy kiểm tra Trình theo dõi hiệu suất để tìm hiểu nguyên nhân.

Lý do hiệu suất tải quan trọng: BookMyShow đã tăng 80% số lượt chuyển đổi khi xây dựng một ứng dụng web tiến bộ tập trung vào tốc độ. Tìm hiểu thêm.

Cách sử dụng Trình giám sát hiệu suất:

  1. Mở Command Menu (Trình đơn lệnh).

  2. Bắt đầu nhập Performance rồi chọn Show Performance Monitor.

    Trình giám sát hiệu suất Hình 1. Trình giám sát hiệu suất

  3. Nhấp vào một chỉ số để hiển thị hoặc ẩn chỉ số đó. Trong Hình 1, các biểu đồ Mức sử dụng CPU, Kích thước vùng nhớ khối xếp JS và Trình nghe sự kiện JS được hiển thị.

Các tính năng có liên quan:

  • Bảng điều khiển Hiệu suất. Xem xét một hành trình quan trọng của người dùng và ghi lại mọi thứ xảy ra trên trang, bao gồm cả hoạt động JavaScript, yêu cầu mạng, mức sử dụng CPU và nhiều thông tin khác. Cũng có thể dùng để phân tích hiệu suất tải. Tìm hiểu thêm.
  • Bảng điều khiển Kiểm tra. Chạy một bộ kiểm thử hiệu suất tải và thời gian chạy tự động cho bất kỳ URL nào. Tìm hiểu thêm.

Nếu bạn mới bắt đầu phân tích hiệu suất, bạn nên sử dụng bảng điều khiển Kiểm tra trước, sau đó tìm hiểu thêm bằng bảng điều khiển Hiệu suất hoặc trình theo dõi Hiệu suất.

Thanh bên của bảng điều khiển

Trên các trang web lớn, Bảng điều khiển có thể nhanh chóng bị ngập tràn thông báo không liên quan. Sử dụng Thanh điều khiển bên mới để giảm sự phiền toái và tập trung vào những thông báo quan trọng đối với bạn.

Chỉ sử dụng Thanh bên của bảng điều khiển để hiển thị thông báo lỗi

Hình 2. Chỉ sử dụng Thanh bên của bảng điều khiển để hiển thị thông báo lỗi

Thanh bên Console bị ẩn theo mặc định. Nhấp vào biểu tượng Hiện thanh bên Bảng điều khiển Hiển thị thanh bên Bảng điều khiển để hiển thị thanh bên.

Các tính năng có liên quan:

  • Hộp văn bản Lọc. Nhập một số văn bản và Console sẽ chỉ hiển thị các thông báo có chứa văn bản đó. Ngoài ra, còn hỗ trợ mẫu biểu thức chính quy, bộ lọc phủ định và bộ lọc URL.

Nhóm các thông báo tương tự trên Bảng điều khiển

Theo mặc định, Bảng điều khiển sẽ nhóm các thông báo tương tự với nhau. Ví dụ: trong Hình 3, có 27 bản sao của thông báo [Violation] Avoid using document.write().

Ví dụ về việc Bảng điều khiển nhóm các thông báo tương tự với nhau

Hình 3. Ví dụ về việc Bảng điều khiển nhóm các thông báo tương tự với nhau

Nhấp vào một nhóm để mở rộng nhóm đó và xem từng phiên bản của thông báo.

Ví dụ về một nhóm thông báo mở rộng trong Bảng điều khiển

Hình 4. Ví dụ về một nhóm thông báo mở rộng trong Bảng điều khiển

Bỏ đánh dấu vào hộp đánh dấu Nhóm các khuôn mặt giống nhau để tắt tính năng này.

Các tính năng có liên quan:

  • Bạn có thể nhóm các thông báo của riêng mình trên Console bằng console.group().

Ghi đè cục bộ

Rất tiếc! Ban đầu, chúng tôi dự kiến ra mắt tính năng này trong Chrome 64, nhưng đã rút lại gần đến thời hạn để khắc phục một số vấn đề. Có vẻ như giao diện người dùng Tính năng mới chưa cập nhật kịp thời. Chúng tôi rất tiếc!

Tính năng này sẽ có trong Chrome 65, phiên bản này sẽ ra mắt khoảng 6 tuần sau Chrome 64. Hãy xem phần Ghi đè cục bộ để tìm hiểu thêm. Nếu đang dùng Windows hoặc Mac, bạn có thể dùng thử Chrome 65 ngay bằng cách tải Chrome Canary xuống.

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.