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

Các tính năng mới và thay đổi lớn sắp ra mắt trong Công cụ cho nhà phát triển trong Chrome 70 bao gồm:

• Biểu thức trực tiếp trong bảng điều khiển.
• Làm nổi bật các nút DOM trong quá trình Đánh giá sớm.
• Tối ưu hoá bảng điều khiển hiệu suất.
• Gỡ lỗi đáng tin cậy hơn.
• Bật tính năng hạn chế băng thông mạng từ Trình đơn lệnh.
• Tự động hoàn thành điểm ngắt có điều kiện.
• Ngừng trên các sự kiện AudioContext.
• Gỡ lỗi ứng dụng Node.js bằng ndb.
• Mẹo bổ sung: Đo lường hoạt độ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.

Hãy đọ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.

1. 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 Live Expression (Biểu cảm trực tiếp) sẽ mở ra.

   

   Hình 1 Giao diện người dùng Biểu thức trực tiếp

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

3. Nhấp vào bên ngoài giao diện người dùng Biểu cảm trực tiếp để lưu biểu cảm.

   

   Hình 3. Một biểu thức trực tiếp đã lưu

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

Làm nổi bật các nút DOM trong quá trình Đánh giá sớm

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

Hình 4. Vì biểu thức hiện tại đánh giá thành một nút, nên nút đó sẽ được làm nổi bật trong khung nhìn

Sau đây là một số biểu thức có thể hữu ích cho bạn:

• 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 đang được chọn trong Cây DOM.
• $0.parentElement để làm nổi bật phần tử mẹ của nút đang được chọn.

Các biện pháp tối ưu hoá trong bảng điều khiển hiệu suất

Trước đây, khi lập hồ sơ cho một trang lớn, bảng điều khiển Hiệu suất mất hàng chục giây để xử lý và trực quan hoá dữ liệu. Đôi khi, 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 cũng mất vài giây để tải. Quá trình 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

Gỡ lỗi đáng tin cậy hơn

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

Bản cập nhật này cũng khắc phục 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 qua mã, còn 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 trong trình đơn Command

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

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

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

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

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? Giao diện người dùng Tự động hoàn thành có thể hoạt động nhờ CodeMirror, cũng là công cụ hỗ trợ Console.

Sự kiện ngắt quãng đối với sự kiện AudioContext

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

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

Hình 8. Các sự kiện AudioContext trong ngăn Điểm ngắt 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 có đượ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ắt buộc phải đặt điểm ngắt trước các mô-đun.
• Chỉnh sửa tệp trong giao diện người dùng DevTools.
• Theo mặc định, bỏ qua tất cả tập lệnh bên ngoài thư mục đang hoạt động.

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 thêm: Đo lường tương tác của người dùng trong thế giới thực bằng User Timing API

Bạn muốn đo lường thời gian người dùng thực cần để hoàn thành các hành trình trọng yếu 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 cho trang chủ của bạn 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 sẽ đánh dấu điểm bắt đầu của hành trình trong trình xử lý sự kiện liên kết với một sự kiện tải trang, chẳng hạn như DOMContentLoaded:

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

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

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 kết quả đo lường để dễ dàng gửi kết quả đo lường đó đến dịch vụ phân tích của mình nhằm thu thập dữ liệu tổng hợp và ẩn danh:

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

DevTools tự động đánh dấu các phép đo Thời gian của người dùng trong phần Thời gian của người dùng của bản ghi Hiệu suất.

Hình 10. Mục Thời gian người dùng

Điều này cũng 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. React thực hiện việc này ở chế độ phát triển.

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 Công cụ cho nhà phát triển, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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.

• Gửi phản hồi và yêu cầu tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.