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! Đã khoảng 12 tuần trôi qua 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ì chúng tôi chưa 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 Console.
Làm nổi bật các nút DOM trong quá trình Đánh giá Eager.
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 chế độ đ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.
Phiên nghỉ giải lao trong các sự kiện AudioContext.
Gỡ lỗi ứng dụng Node.js bằng ndb.
Mẹo thêm: Đ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.

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

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

Hình 1 Giao diện người dù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 của bạn.

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 sẽ cập nhật 250 mili giây một lần.

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

Nhập một biểu thức đánh giá cho nút DOM trong Console và Eager Đánh giá ngay 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. Chỉ số này không cập nhật theo 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 rồi nhấn phím tab thông qua trang, Công cụ cho nhà phát triển vẫn sẽ làm nổi bật nút đang hoạt động khi bạn ban đầu đã nhập biểu thức.

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

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

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

document.activeElement để đánh dấu nút hiện có tiêu điểm.
document.querySelector(s) để đánh dấu một nút tuỳ ý, trong đó s là bộ chọn CSS. Chiến dịch 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 đ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. Đô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 mất nhiều giây để tải. Chrome 70 có tốc độ xử lý và hiển thị nhanh hơn.

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 duyệt qua 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 biện pháp khắc phục 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ể thiết lập chế độ điều tiết mạng thành 3G nhanh hoặc 3G chậm trong Trình đơn lệnh.

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

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

Điểm ngắt có điều kiện 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? Giao diện người dùng Tự động hoàn thành có thể thực hiện được nhờ CodeMirror, nền tảng này cũng hỗ trợ Bảng điều khiển.

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

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

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

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

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ó 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 tiến trình con.
Bạn 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 của Công cụ cho nhà phát triển.
Bỏ qua mọi tập lệnh nằm ngoài thư mục đang làm việc hiện tại theo mặc định.

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

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

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 API Thời gian người dùng

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? Cân nhắc đo lường mã của bạn bằng User Timing API.

Ví dụ: giả sử bạn muốn đo lường thời lượng 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 hành trình trong một 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 số liệu đo lường của mình để dễ dàng gửi các số liệu đó đế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 phần Thời gian 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

Tính năng 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 của bạn, hãy gọi window.performance.mark() ở đầu và cuối của Lifecycle. 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 việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

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ông cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Để 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 Mẹo video trên YouTube trong Công cụ cho nhà phát triển.