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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Hỗ trợ gỡ lỗi WebAssembly

Công cụ cho nhà phát triển bật Cài đặt. Cài đặt > Thử nghiệm > Hộp đánh dấu. Gỡ lỗi WebAssembly: Bật tính năng hỗ trợ DWARF theo mặc định. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi WebAssembly bằng các công cụ hiện đại.

Thử nghiệm này cho phép bạn tạm dừng việc thực thi và gỡ lỗi mã C và C++ trong ứng dụng Wasm, với tất cả thông tin gỡ lỗi có sẵn cho bạn:

  • Mã nguồn ban đầu của bạn, được ánh xạ bằng thông tin gỡ lỗi DWARF.
  • Tên hàm dễ hiểu trong ngăn xếp lệnh gọi.
  • Hỗ trợ điểm ngắt và nhiều lợi ích khác.

Một ứng dụng Wasm đã bị tạm dừng trong Trình gỡ lỗi.

Để kiểm thử cách gỡ lỗi Wasm, hãy cài đặt tiện ích Hỗ trợ Công cụ cho nhà phát triển C/C++ (DWARF) và duyệt qua mã trong bản minh hoạ Mandelbrot.

Vấn đề về Chromium: 1414289.

Cải thiện hành vi đi bộ trong các ứng dụng Wasm

Nhảy cóc. Giờ đây, bạn có thể Bước qua trong mã gốc để tránh tạm dừng khi tháo rời (tệp .wasm). Trước đây, tính năng này sẽ tạm dừng ở đó.

Tuy nhiên, bước kết thúc khi bước này nằm bên ngoài hàm mà nó đã bắt đầu, chẳng hạn như sau khi trở lại từ hàm đó.

Hành vi này được bật theo mặc định trong Cài đặt. Cài đặt > Lựa chọn ưu tiên > Nguồn.

Bạn có thể tìm thấy chế độ cài đặt mới trong phần Lựa chọn ưu tiên > Nguồn.

Vấn đề về Chromium: 1418938.

Gỡ lỗi Tự động điền bằng bảng điều khiển Phần tử và thẻ Vấn đề

Tính năng Tự động điền của Chrome sẽ tự động điền các thông tin đã lưu vào biểu mẫu, chẳng hạn như địa chỉ hoặc thông tin thanh toán của bạn. Để giúp bạn dễ dàng gỡ lỗi các vấn đề liên quan đến tính năng Tự động điền, giờ đây, bảng điều khiển Phần tử có thể làm nổi bật các phần tử đó bằng dấu gạch dưới cong màu đỏ.

Để xem tính năng này, hãy bật Cài đặt. Cài đặt > Thử nghiệm > Hộp đánh dấu. Làm nổi bật một nút hoặc thuộc tính vi phạm trong cây DOM của bảng điều khiển Phần tử và kiểm tra trang minh hoạ này.

Các vấn đề về tính năng tự động điền được làm nổi bật trong bảng điều khiển Phần tử và được bảng Vấn đề báo cáo.

Di chuột qua một vấn đề được đánh dấu trong cây DOM rồi nhấp vào Xem vấn đề để mở thẻ Vấn đề. Thẻ này liệt kê tất cả vấn đề đã phát hiện và đưa ra manh mối về lỗi.

Vấn đề về Chromium: 1399414.

Câu nhận định trong Máy ghi âm

Giờ đây, bảng điều khiển Recorder (Trình ghi âm) cho phép bạn thêm câu nhận định ngay trong quá trình ghi và cung cấp sẵn mọi dữ liệu thời gian chạy cho bạn.

Để thêm câu nhận định, hãy bắt đầu một bản ghi mới, tương tác với trang của bạn rồi nhấp vào Thêm câu nhận định. Máy ghi âm sẽ chèn một bước có loại waitForElement mà bạn có thể tuỳ chỉnh nhanh chóng. Xem video để xem các khẳng định đang hoạt động trên bản minh hoạ giỏ hàng.

Video này hướng dẫn bạn cách xác nhận:

  • Thuộc tính HTML, ví dụ: class của một phần tử.
  • Các thuộc tính JavaScript trong JSON, ví dụ: .innerText.

Bạn cũng có thể định cấu hình các bước để xác nhận, ví dụ: câu lệnh có điều kiện trong JavaScript, số lượng phần tử con của nút (count), mức độ hiển thị phần tử, v.v. Để biết thêm thông tin, hãy xem bài viết Định cấu hình các bước.

Ngoài ra, Trình ghi giờ đây ghi nhớ định dạng tập lệnh mà bạn ưu tiên trong chế độ xem mã cạnh nhau và trình đơn bước nhấp chuột phải.

Vấn đề về Chromium: 1423624.

Lighthouse 10.1.1

Bảng điều khiển Lighthouse hiện chạy phiên bản Lighthouse 10.1.1, với một thay đổi đáng chú ý được giới thiệu trong 10.1.0. Tất cả các lượt kiểm tra liên quan đến URL hiện được nhóm theo thực thể và tổng hợp số liệu thống kê bằng số, chẳng hạn như kích thước hoặc thời lượng. Các bên thứ ba phổ biến cũng được gắn thẻ với danh mục của họ để dễ dàng xác định mục đích của họ trên trang.

Các cuộc kiểm tra được nhóm theo pháp nhân.

Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Cải thiện hiệu suất

performance.mark() hiển thị thời gian khi di chuột trong phần Hiệu suất > Thời gian

Giờ đây, phương thức Performance.mark() hiển thị thời gian khi bạn di chuột qua dấu tương ứng trong phần Hiệu suất > Thời gian. Thời gian ở đây là một dấu thời gian liên quan đến sự kiện điều hướng trước đó.

Cửa sổ bật lên có thời gian khi di chuột trong mục Thời gian.

Vấn đề về Chromium: 1426762.

Lệnh profile() điền sẵn Hiệu suất > Số điện thoại chính

Giờ đây, các lệnh profile() và profileEnd() trong Bảng điều khiển sẽ bắt đầu và dừng phân tích CPU trong luồng Chính của bảng điều khiển Hiệu suất.

Lệnh console() sẽ tạo một hồ sơ trong bảng điều khiển Hiệu suất.

Vấn đề về Chromium: 1429191.

Cảnh báo về tốc độ tương tác chậm của người dùng

Những lượt tương tác dài hơn 200 mili giây của người dùng sẽ nhận được cảnh báo Lượt tương tác với nội dung hiển thị tiếp theo (INP) trong phần Hiệu suất > Thẻ Tóm tắt.

Cảnh báo INP.

Ngoài ra, mã nhận dạng của lượt tương tác đã được chuyển từ chú giải công cụ sang Tóm tắt.

Vấn đề về Chromium: 1432512, 1432509.

Theo dõi Chỉ số quan trọng của trang web đã chuyển sang

Bảng điều khiển Hiệu suất đã xoá các kênh sau:

  • Theo dõi Các chỉ số quan trọng về trang web. Thay vào đó, hãy xem các dấu thời gian có liên quan trong kênh Thời gian khi di chuột.
  • phụ đề Nhiệm vụ dài. Bạn có thể tìm thấy các công việc như vậy trong kênh Chính được tô bóng màu đỏ và có một hình tam giác màu đỏ.

Cả kênh Chỉ số quan trọng về trang web và Tác vụ dài đều chứa thông tin trùng lặp ở nơi khác. Các quảng cáo này cũng không tương tác so với các giải pháp thay thế có đầy đủ tính năng hơn, cung cấp thông tin chi tiết hơn khi người dùng nhấp vào.

Trước và sau khi chuyển Chỉ số quan trọng của trang web sang kênh Thời gian.

Ngoài ra, kênh Trải nghiệm đã được đổi tên thành Layout Shifts để phản ánh chính xác hơn việc sử dụng kênh này.

Tìm hiểu thêm về Chỉ số quan trọng của trang web.

Ngừng sử dụng Trình phân tích tài nguyên JavaScript: Giai đoạn 3

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển dự định sẽ ngừng sử dụng Trình phân tích tài nguyên JavaScript và yêu cầu các nhà phát triển Node.js và Deno sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất của CPU JavaScript.

Công cụ cho nhà phát triển phiên bản 114 bắt đầu giai đoạn 3 của quá trình ngừng sử dụng Trình phân tích tài nguyên JavaScript trong 4 giai đoạn. Trong giai đoạn này, bảng điều khiển Trình phân tích tài nguyên JavaScript sẽ bị xoá khỏi Công cụ cho nhà phát triển nhưng bạn vẫn có thể tạm thời bật bảng này thông qua phần Cài đặt Cài đặt. > Thử nghiệm và mở thử nghiệm đó từ trình đơn có biểu tượng ba dấu chấm của Trình đơn có biểu tượng ba dấu chấm..

Hộp đánh dấu trình phân tích tài nguyên JavaScript trong phần Cài đặt > Thử nghiệm.

Để phân tích hiệu suất của CPU, hãy sử dụng bảng điều khiển Performance (Hiệu suất).

Vấn đề về Chromium: 1428026.

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi đáng chú ý trong bản phát hành này:

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   Thêm > 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.

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.