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

Kayce Basques
Kayce Basques
X GitHub

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ụ cho nhà phát triển của Chrome 64 bao gồm:

Hãy đọc tiếp hoặc xem phiên bản video của 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 giám sát 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 một 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 có vẻ chậm hoặc giật, hãy kiểm tra Trình giám sát hiệu suất để tìm manh mối.

Lý do khiến hiệu suất tải trở nên quan trọng: BookMyShow đã tăng số lượt chuyển đổi thêm 80% khi họ tạo một Ứng dụng web lũy tiến 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ở 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 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 xử lý sự kiện JS sẽ xuất hiện.

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

  • Bảng điều khiển Hiệu suất. Thực hiện 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 hoạt động khác. Cũng có thể được dùng để phân tích hiệu suất tải. Tìm hiểu thêm.
  • Bảng Audits (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 đối với mọi URL. Tìm hiểu thêm.

Nếu mới bắt đầu phân tích hiệu suất, bạn nên sử dụng bảng Kiểm tra trước, sau đó điều tra thêm bằng bảng Hiệu suất hoặc màn hình 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ị tràn ngập các thông báo không liên quan. Sử dụng Thanh bên của Console mới để giảm bớt thông tin không cần thiết và tập trung vào những thông báo quan trọng đối với bạn.

Sử dụng thanh bên Console để chỉ hiện thông báo lỗi

Hình 2. Sử dụng thanh bên Console để chỉ hiện thông báo lỗi

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

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

  • Hộp văn bản Lọc. Nhập một đoạn văn bản và Bảng điều khiển sẽ chỉ hiện những thông báo có chứa đoạn văn bản đó. Cũng hỗ trợ các 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ự trong Console

Theo mặc định, bảng điều khiển hiện nhóm các thông báo tương tự với nhau. Ví dụ: trong Hình 3, có 27 trường hợp xuất hiện 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 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 trên Bảng điều khiển

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

Bỏ đánh dấu hộp 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 liên quan:

  • Bạn có thể nhóm các thông báo của riêng mình trên Bảng điều khiển 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 thời hạn để khắc phục một số vấn đề. Rõ ràng là 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 phát hành trong Chrome 65, tức là khoảng 6 tuần sau Chrome 64. Hãy xem Thông tin thay thế tại địa phương để tìm hiểu thêm. Nếu đang dùng Windows hoặc máy Mac, bạn có thể dùng thử Chrome 65 ngay bây giờ 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.