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ì 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 có bài đăng.

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 biểu tượng Tạo biểu thức trực tiếp . Giao diện người dùng Biểu thức 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
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á nút DOM trong Bảng điều khiển và Đá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. 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 qua trang, Công cụ cho nhà phát triển sẽ vẫn làm nổi bật nút đang hoạt động khi ban đầu bạn 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 đó sẽ được làm nổi bật 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. Đ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 đ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 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ã, 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ể 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 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 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ể 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ó đượ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 User Timing API

Bạn muốn đo lường thời gian người dùng thực tế 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ã của bạn bằng User Timing API.

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 nên đá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, giúp dễ dàng gửi các số liệu đo lườ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 các 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, 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 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ố trong 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.