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! Sau đây là các tính năng mới được ra mắt trong Công cụ cho nhà phát triển trong Chrome 64:

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

Trình theo dõi hiệu suất

Sử dụng Công cụ theo dõi hiệu suất để xem các khía cạnh theo thời gian thực đối với hiệu suất tải hoặc khi bắt đầu chạy của một trang, bao gồm:

  • Mức sử dụng CPU.
  • Kích thước 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.
  • Bố cục và tính toán lại 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 bị chậm hoặc có hiện tượng giật, hãy kiểm tra Trình theo dõi hiệu suất để tìm manh mối.

Tại sao hiệu suất tải lại quan trọng: BookMyShow đã tăng số lượt chuyển đổi thêm 80% khi tạo được 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 Công cụ theo dõi 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 theo dõi hiệu suất Hình 1. Trình theo dõi hiệu suất

  3. Nhấp vào một chỉ số để hiện hoặc ẩn chỉ số đó. Trong Hình 1, bạn thấy 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.

Tính năng liên quan:

  • Bảng điều khiển Hiệu suất. Xem qua hành trình quan trọng của người dùng và ghi lại mọi hoạt động 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.v. Bạn 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 bộ kiểm tra hiệu suất thời gian chạy và tải tự động đối với bất kỳ URL nào. 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 điều khiển Kiểm tra, sau đó tìm hiểu thêm bằng bảng điều khiển 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, Console có thể nhanh chóng nhận được quá nhiều thông báo không liên quan. Hãy sử dụng Thanh bên của Play Console mới để giảm bớt thông báo và tập trung vào các thông điệp quan trọng đối với bạn.

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

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

Thanh bên của Bảng điều khiển bị ẩn theo mặc định. Hãy nhấp vào biểu tượng Show Console Toolbar (Hiện thanh bên của bảng điều khiển) Hiện thanh bên của bảng điều khiển để hiện thanh bên này.

Tính năng liên quan:

  • Hộp văn bản Bộ lọc. Nhập một số văn bản và Bảng điều khiển chỉ hiển thị các thông báo có chứa văn bản đó. Đồng thời, 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ự trên Bảng điều khiển

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

Ví dụ về việc nhóm các thông báo tương tự lại với nhau trên Play Console

Hình 3. Ví dụ về việc nhóm các thông báo tương tự lại với nhau trên Play Console

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

Ví dụ về một nhóm thông báo trên Console được mở rộng

Hình 4. Ví dụ về một nhóm thông báo trên Console được mở rộng

Bỏ đánh dấu hộp Nhóm tương tự để tắt tính năng này.

Tính năng liên quan:

  • Bạn có thể nhóm các thông báo của chính 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 lên lịch phát hành tính năng này trong Chrome 64, nhưng đã gần đến thời hạn để làm mượt mà một số cạnh khó khăn. Rõ ràng là giao diện người dùng What's New (Tính năng mới) không cập nhật kịp thời. Chúng tôi rất tiếc!

Tính năng này đang được triển khai trong Chrome 65, sẽ ra mắt khoảng 6 tuần sau Chrome 64. Hãy xem phần Cơ chế ghi đè cục bộ để tìm hiểu thêm. Nếu đang sử 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 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 cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!

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

Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59