Trang này được dịch bởi Cloud Translation API.

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

Kayce Basques

Chào mừng bạn quay lại! Đã được khoảng 12 tuần kể từ lần cập nhật gần đây nhất của chúng tôi cho Chrome 68. Chúng tôi đã bỏ qua Chrome 69 vì không có đủ tính năng mới hoặc các thay đổi về giao diện người dùng để đảm bảo việc đăng bài.

Sau đây là các tính năng mới và những thay đổi quan trọng sắp tới với Công cụ cho nhà phát triển trong Chrome 70:

Biểu thức trực tiếp trong Console.
Đánh dấu các nút DOM trong quá trình Đánh giá mong muốn.
Tối ưu hoá bảng hiệu suất.
Hoạt động gỡ lỗi đáng tin cậy hơn.
Bật chế độ điều tiết mạng từ trình đơn Command.
Điểm ngắt có điều kiện tự động hoàn thành.
Ngắt trên AudioContext sự kiện.
Gỡ lỗi ứng dụng Node.js bằng ndb.
Mẹo thêm: Đo lường tương tác của người dùng trong thực tế bằng API Thời gian người dùng.

Đọc tiếp hoặc xem phiên bản video của tài liệu này:

Biểu thức trực tiếp trong Console

Ghim Biểu thức trực tiếp vào đầu Bảng điều khiển khi bạn muốn theo dõi giá trị của biểu thức đó theo thời gian thực.

Nhấp vào biểu tượng Tạo biểu thức trực tiếp . Giao diện người dùng của Biểu thức trực tiếp sẽ mở ra.

Hình 1 Giao diện người dùng của tính năng Biểu thức trực tiếp
Nhập biểu thức mà bạn muốn theo dõi.

Hình 2. Nhập Date.now() vào Giao diện người dùng Biểu thức trực tiếp
Nhấp vào bên ngoài giao diện người dùng Biểu thức trực tiếp để lưu biểu thức.

Hình 3. Biểu thức trực tiếp đã lưu

Giá trị Biểu thức trực tiếp cập nhật 250 mili giây một lần.

Đánh dấu các nút DOM trong quá trình Đánh giá mức độ chăm chút

Nhập một biểu thức đánh giá nút DOM trong Bảng điều khiển và Đánh giá Eager (Đánh giá Eager) giờ đây sẽ làm nổi bật nút đó trong khung nhìn.

Lưu ý: Nút được đánh dấu chỉ cập nhật khi bạn nhập. Đồng hồ không cập nhật trong một khoảng thời gian. Ví dụ: nếu bạn nhập document.activeElement để theo dõi phần tử được đặt tiêu điểm, sau đó nhấn phím tab trên trang, Công cụ cho nhà phát triển vẫn sẽ làm nổi bật nút đã hoạt động khi bạn nhập biểu thức ban đầu.

Sau khi nhập document.activeElement trong Bảng điều khiển, một nút được đánh dấu trong khung nhìn.

Hình 4. Vì biểu thức hiện tại đánh giá một nút, nên nút đó được đánh dấu trong khung nhìn

Dưới đây là một số biểu thức bạn có thể thấy hữu ích:

document.activeElement để làm nổi bật nút hiện có tiêu điểm.
document.querySelector(s) để làm nổi bật một nút tuỳ ý, trong đó s là một bộ chọn CSS. Điều này tương đương với việc di chuột qua một nút trong Cây DOM.
$0 để làm nổi bật bất kỳ nút nào hiện được chọn trong Cây DOM.
$0.parentElement để làm nổi bật nút mẹ của nút đang được chọn.

Tối ưu hoá bảng hiệu suất

Khi phân tích một trang lớn, trước đây bảng Hiệu suất mất hàng chục giây để xử lý và trực quan hoá dữ liệu. Việc nhấp vào một sự kiện để tìm hiểu thêm về sự kiện đó trong thẻ Tóm tắt đôi khi cũng mất nhiều giây để tải. Xử lý và trực quan hoá nhanh hơn trong Chrome 70.

Hình 5. Xử lý và tải dữ liệu Hiệu suất

Quy trình gỡ lỗi đáng tin cậy hơn

Chrome 70 khắc phục một số lỗi khiến các điểm ngắt biến mất hoặc không được kích hoạt.

Công cụ này cũng sửa các lỗi liên quan đến bản đồ nguồn. Một số người dùng TypeScript sẽ hướng dẫn Công cụ cho nhà phát triển bỏ qua một tệp TypeScript nhất định trong khi thực hiện các bước mã và thay vào đó, Công cụ cho nhà phát triển sẽ bỏ qua toàn bộ tệp JavaScript đi kèm. Các bản sửa lỗi này cũng giải quyết vấn đề khiến bảng điều khiển Nguồn thường chạy chậm.

Bật chế độ điều tiết mạng qua trình đơn Lệnh

Giờ đây, bạn có thể thiết lập chế độ điều tiết mạng thành 3G nhanh hoặc 3G chậm bằng Trình đơn lệnh.

Các lệnh điều tiết mạng trong Trình đơn lệnh.

Hình 6. Các lệnh điều tiết mạng trong Trình đơn lệnh

Điểm ngắt có điều kiện của tính năng Tự động hoàn thành

Sử dụng giao diện người dùng Tự động hoàn thành để nhập biểu thức Điểm ngắt có điều kiện nhanh hơn.

Giao diện người dùng của tính năng Tự động hoàn thành

Hình 7. Giao diện người dùng của tính năng Tự động hoàn thành

Bạn có biết? Có thể có giao diện người dùng Tự động hoàn thành nhờ CodeMirror, một nền tảng cũng hỗ trợ Play Console.

Ngắt trên các sự kiện AudioContext

Sử dụng ngăn Điểm ngắt của trình nghe sự kiện để tạm dừng trên dòng đầu tiên của trình xử lý sự kiện vòng đời AudioContext.

AudioContext là một phần của API Web âm thanh mà bạn có thể dùng để xử lý và tổng hợp âm thanh.

Các sự kiện AudioContext trong ngăn Điểm ngắt của trình nghe sự kiện.

Hình 8. Các sự kiện AudioContext trong ngăn Điểm ngắt của trình nghe sự kiện

Gỡ lỗi ứng dụng Node.js bằng ndb

ndb là một trình gỡ lỗi mới cho các ứng dụng Node.js. Ngoài các tính năng gỡ lỗi thông thường mà bạn nhận được thông qua Công cụ cho nhà phát triển, ndb cũng cung cấp:

Phát hiện và đính kèm vào các quy trình con.
Bạn phải đặt điểm ngắt trước mô-đun.
Chỉnh sửa tệp trong giao diện người dùng Công cụ cho nhà phát triển.
Bỏ qua tất cả các tập lệnh bên ngoài thư mục đang hoạt động theo mặc định.

Giao diện người dùng ndb.

Hình 9. Giao diện người dùng ndb

Hãy xem README của ndb để tìm hiểu thêm.

Mẹo hay: Đo lường tương tác của người dùng trong thế giới thực bằng API Thời gian người dùng

Bạn muốn đo lường thời gian để người dùng thực sự hoàn tất các hành trình quan trọng trên các trang của bạn? Hãy cân nhắc việc đo lường mã bằng API Thời gian người dùng.

Ví dụ: giả sử bạn muốn đo lường thời gian người dùng dành ra trên trang chủ trước khi nhấp vào nút lời kêu gọi hành động (CTA). Trước tiên, bạn cần đánh dấu điểm bắt đầu hành trình trong trình xử lý sự kiện được liên kết với sự kiện tải trang, chẳng hạn như DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Sau đó, bạn đánh dấu điểm kết thúc hành trình và tính toán thời lượng của hành trình khi người dùng nhấp vào nút này:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Bạn cũng có thể trích xuất các chỉ số đo lường để dễ dàng gửi chúng đến dịch vụ phân tích để thu thập dữ liệu tổng hợp và ẩn danh:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

Công cụ cho nhà phát triển tự động đánh dấu các phép đo Thời gian người dùng trong mục Thời gian người dùng của Bản ghi hiệu suất.

Phần Thời gian người dùng.

Hình 10. Phần Thời gian người dùng

Tính năng này cũng rất hữu ích khi gỡ lỗi hoặc tối ưu hoá mã. Ví dụ: nếu bạn muốn tối ưu hoá một giai đoạn nhất định trong vòng đời, hãy gọi window.performance.mark() ở đầu và cuối hàm vòng đời của bạn. React thực hiện việc này ở chế độ phát triển.

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 > 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.