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

Chào mừng bạn đến với phần đầu tiên của bản ghi chú phát hành DevTools! Từ giờ trở đi, lần đầu tiên bạn mở phiên bản Chrome mới, DevTools sẽ mở ngăn Tính năng mới kèm theo đường liên kết đến ghi chú phát hành của phiên bản đó.

Điểm nổi bật

  • 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ớ.
  • Bạn hiện có thể chỉnh sửa giá trị cookie.
  • Công cụ cho nhà phát triển hiện tự động tạm dừng trước khi xảy ra lỗi hết bộ nhớ.

Tính năng mới

Cookie có thể chỉnh sửa

Nhấp đúp vào một ô trong thẻ Cookies để chỉnh sửa giá trị đó.

Chỉnh sửa cookie.
Hình 1. Chỉnh sửa cookie

Cảm ơn kdzwinel đã đóng góp!

Các biến CSS có thể kiểm tra và chỉnh sửa trong ngăn Kiểu

Giờ đây, bạn có thể kiểm tra và chỉnh sửa các biến CSS trong ngăn Kiểu. Hãy xem Bản minh hoạ biến CSS để tự mình dùng thử.

Điểm ngắt hết bộ nhớ

Khi một ứng dụng phân bổ nhiều bộ nhớ trong một khoảng thời gian ngắn, DevTools hiện sẽ tự động tạm dừng và tăng giới hạn vùng nhớ khối xếp. Điều này cho phép bạn kiểm tra vùng nhớ khối xếp, thực thi các lệnh trên Bảng điều khiển để giải phóng bộ nhớ và tiếp tục gỡ lỗi vấn đề. Hãy xem bài viết Một bước nhỏ cho Chrome, một vùng nhớ khối xếp khổng lồ cho V8 để biết thêm thông tin.

Đã tạm dừng tại điểm ngắt hết bộ nhớ
Hình 2. Đã tạm dừng tại điểm ngắt hết bộ nhớ

Điểm ngắt khi tạo canvas

Giờ đây, bạn có thể tạo điểm ngắt trình nghe sự kiện được kích hoạt bất cứ khi nào tạo một ngữ cảnh canvas mới.

Các điểm ngắt tạo canvas thông qua hộp đánh dấu Tạo bối cảnh canvas trong ngăn Điểm ngắt của trình nghe sự kiện
Hình 3. Các điểm ngắt tạo canvas thông qua hộp đánh dấu Create canvas context (Tạo bối cảnh canvas) trong ngăn Event Listener Breakpoints (Điểm ngắt của trình nghe sự kiện)

Số liệu thống kê về thời gian bắt đầu trong thẻ Thời gian

Ở đầu thẻ Timing (Thời gian), giờ đây, bạn có thể thấy thời điểm một yêu cầu được đưa vào hàng đợi và bắt đầu.

Số liệu thống kê về thời gian bắt đầu trong thẻ Thời gian.
Hình 4. Số liệu thống kê về thời gian bắt đầu trong thẻ Thời gian

Số liệu thống kê về máy chủ trong thẻ Thời gian

Giờ đây, bạn có thể chèn số liệu thống kê tuỳ chỉnh của máy chủ vào thẻ Thời gian. Hãy xem phần Minh hoạ các giá trị thời gian của máy chủ để biết ví dụ.

Số liệu thống kê về máy chủ trong thẻ Thời gian
Hình 5. Số liệu thống kê về máy chủ trong thẻ Timing (Thời gian)

Cảm ơn sroussey đã đóng góp!

Các thay đổi

Bảng điều khiển Dòng thời gian hiện là Bảng điều khiển hiệu suất

Chúng tôi đã đổi tên bảng điều khiển Dòng thời gian thành bảng điều khiển Hiệu suất để phản ánh rõ ràng hơn mục đích của bảng điều khiển này.

Bảng Hồ sơ hiện là bảng Bộ nhớ

Bảng điều khiển Hồ sơ đã được đổi tên thành Bảng điều khiển Bộ nhớ để phản ánh rõ hơn mục đích của bảng điều khiển này.

Trình phân tích CPU nằm sau một bảng điều khiển ẩn

Giờ đây, bảng điều khiển Hồ sơ được gọi là bảng điều khiển Bộ nhớ, nên việc có trình phân tích CPU trên bảng điều khiển đó không còn hợp lý nữa. Hơn nữa, mục tiêu dài hạn là thu thập hồ sơ của tất cả người dùng từ bảng điều khiển Hiệu suất. Trong thời gian chờ đợi, bạn vẫn có thể truy cập trình phân tích CPU cũ từ Cài đặt > Công cụ khác > Trình phân tích JavaScript.

Hãy xem bài viết Chrome DevTools: Lập hồ sơ CPU JavaScript trong Chrome 58 để tìm hiểu cách lập hồ sơ CPU trong bảng điều khiển Hiệu suất.

Giao diện người dùng mới của Bảng điều khiển

Bảng điều khiển và ngăn của Console đã trải qua một số thay đổi về giao diện người dùng. Một số tính năng không phổ biến đã được chuyển sang các vị trí ẩn hơn và các tính năng phổ biến hiện dễ truy cập hơn.

  • Nhấp vào biểu tượng Cài đặt bảng điều khiển Cài đặt bảng điều khiển để truy cập vào phần cài đặt nhằm tuỳ chỉnh hành vi của Bảng điều khiển.
  • Giờ đây, tuỳ chọn Preserve log (Duy trì nhật ký) đã bị ẩn trong phần Console Settings (Cài đặt bảng điều khiển).
  • Nút và ngăn Bộ lọc đã biến mất. Thay vào đó, hãy sử dụng trình đơn thả xuống.
  • Hộp văn bản để lọc nhật ký hiện luôn hiển thị. Trước đây, tuỳ chọn này bị ẩn trong ngăn Bộ lọc.
  • Hộp văn bản lọc tự động chấp nhận RegEx, vì vậy, hộp đánh dấu Regex sẽ biến mất.
  • Hộp đánh dấu Ẩn lỗi vi phạm đã biến mất. Đặt trình đơn thả xuống cấp độ ghi nhật ký thành Chi tiết để xem các lỗi vi phạm.
  • Việc bỏ đánh dấu hộp đánh dấu Hiện tất cả thông báo trong giao diện người dùng cũ tương đương với việc đánh dấu hộp đánh dấu Chỉ bối cảnh đã chọn trong phần Cài đặt của Console trong giao diện người dùng mới.
Giao diện người dùng mới của Console
Hình 6. Giao diện người dùng mới của Console

Các điểm ngắt của trình nghe sự kiện WebGL đã di chuyển

Các điểm ngắt trình nghe sự kiện WebGL đã di chuyển từ danh mục WebGL sang danh mục Canvas. Đã xoá danh mục WebGL.