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

Kayce Basques
Kayce Basques
X GitHub

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ó đủ tính năng mới hoặc thay đổi về giao diện người dùng để đảm bảo một bài đăng.

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

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

Live Expressions trong Console

Ghim một Biểu thức trực tiếp lên đầ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 Tạo biểu thức trực tiếp Tạo biểu thức theo thời gian thực. Giao diện người dùng Live Expression sẽ mở ra.

    Giao diện người dùng Live Expression

    Hình 1 Giao diện người dùng Live Expression

  2. Nhập biểu thức mà bạn muốn theo dõi.

    Nhập Date.now() vào giao diện người dùng Live Expression.

    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 ra ngoài giao diện người dùng Biểu hiện trực tiếp để lưu biểu hiện.

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

    Hình 3. Biểu thức khuôn mặt đã lưu

Giá trị Biểu cảm trực tiếp được cập nhật sau mỗi 250 mili giây.

Làm nổi bật các nút DOM trong quá trình Đánh giá nghiêm ngặt

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à tính năng Đánh giá tức thì hiện sẽ làm nổi bật nút đó trong khung hiển thị.

Sau khi bạn nhập document.activeElement vào Bảng điều khiển, một nút sẽ được làm nổi bật trong khung hiển thị.

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

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 đang có tiêu điểm.
  • document.querySelector(s) để làm nổi bật một nút bất kỳ, trong đó s là một bộ chọn CSS. Điều này tương đương với việc di chuột lên 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 điều khiển hiệu suất

Khi lập hồ sơ một trang lớn, trước đây, 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. 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 vài giây để tải. Quá trình xử lý và trực quan hoá diễn ra nhanh hơn trong Chrome 70.

Đang xử lý và tải dữ liệu về hiệu suất.

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 các đ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 DevTools bỏ qua một tệp TypeScript nhất định trong khi thực hiện từng bước qua mã, nhưng thay vào đó, DevTools sẽ bỏ qua toàn bộ tệp JavaScript được kết hợp. Những bản sửa lỗi này cũng giải quyết một vấn đề khiến bảng Sources (Nguồn) thường chạy chậm.

Bật tính năng hạn chế mạng trong Trình đơn lệnh

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

Lệnh hạn chế băng thông mạng trong Trình đơn lệnh.

Hình 6. Lệnh hạn chế băng thông mạng trong Trình đơn lệnh

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 biểu thức Conditional Breakpoint (Đ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? 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ợ Bảng điều khiển.

Ngắt khi có sự kiện AudioContext

Sử dụng ngăn Các điểm ngắt của trình xử lý 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 Web Audio API. Bạn có thể dùng API này để xử lý và tổng hợp âm thanh.

Các sự kiện AudioContext trong ngăn Các điểm ngắt của trình xử lý sự kiện.

Hình 8. Các sự kiện AudioContext trong ngăn Các điểm ngắt của trình xử lý 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òn cung cấp:

  • Phát hiện và gắn vào các tiến trình con.
  • Bạn cần đặt điểm ngắt trước khi có các mô-đun.
  • Chỉnh sửa tệp trong giao diện người dùng của Công cụ cho nhà phát triển.
  • Theo mặc định, bỏ qua tất cả các tập lệnh bên ngoài thư mục làm việc hiện tại.

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 bổ sung: Đo lường lượt tương tác của người dùng thực tế bằng API Thời gian người dùng

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

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 một 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 sẽ đánh dấu điểm kết thúc của 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:

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

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.

Mục Thời gian người dùng.

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