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

Sofia Emelianova

Jecelyn Yeen

Hỗ trợ gỡ lỗi WebAssembly

Theo mặc định, DevTools sẽ bật Settings (Cài đặt) > Experiments (Thử nghiệm) > WebAssembly Debugging: Enable DWARF support (Gỡ lỗi WebAssembly: Bật tính năng hỗ trợ DWARF). Để 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 quá trình thực thi và gỡ lỗi mã C và C++ trong các ứ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 liên kết 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 tính năng khác.

Để kiểm thử tính năng gỡ lỗi Wasm, hãy cài đặt tiện ích Hỗ trợ DevTools C/C++ (DWARF) và từng bước thực hiện mã trong bản minh hoạ Mandelbrot.

Vấn đề về Chromium: 1414289.

Cải thiện hành vi bước trong ứng dụng Wasm

Bước qua trong mã gốc của bạn hiện tránh tạm dừng trong quá trình tháo rời (tệp .wasm). Trước đây, quá trình này sẽ tạm dừng ở đó.

Tuy nhiên, quá trình bước sẽ kết thúc khi nó nằm ngoài hàm bắt đầu, ví dụ: sau khi trả về từ hàm.

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

Vấn đề về Chromium: 1418938.

Gỡ lỗi tính năng 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 tự động điền 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 Elements (Thành phần) có thể làm nổi bật các vấn đề đó bằng dấu gạch dưới cong màu đỏ.

Để xem tính năng này, hãy bật Settings (Cài đặt) > Experiments (Thử nghiệm) > Highlights a violating node or attribute in the Elements panel DOM tree (Đánh dấu 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 Elements (Phần tử)) rồi kiểm tra trang minh hoạ này.

Di chuột qua một vấn đề được làm nổi bật 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 được và cung cấp gợi ý về vấn đề.

Vấn đề về Chromium: 1399414.

Xác nhận trong Trình ghi

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

Để thêm một 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. Trình ghi chèn một bước có loại waitForElement mà bạn có thể tuỳ chỉnh ngay lập tức. Hãy xem video để thấy cách hoạt động của câu nhận định trong bản minh hoạ về giỏ hàng cà phê.

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ử.
• 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), chế độ hiển thị phần tử, v.v. Để biết thêm thông tin, hãy xem phần Định cấu hình các bước.

Ngoài ra, Trình ghi hiện sẽ 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 Lighthouse 10.1.1, với một thay đổi đáng chú ý được giới thiệu trong phiên bản 10.1.0. Tất cả quy trình kiểm tra liên quan đến URL hiện được nhóm theo thực thể và dữ liệu thống kê tổng hợp ở dạ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ẻ theo danh mục để dễ dàng xác định mục đích của họ trên trang.

Để tìm hiểu kiến thức 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

Phương thức performance.mark() hiện hiển thị thời gian khi bạn di chuột qua dấu tương ứng trong Hiệu suất > Thời gian. Thời gian ở đây là dấu thời gian tương ứng với sự kiện điều hướng trước đó.

Vấn đề về Chromium: 1426762.

Lệnh profile() sẽ điền sẵn Performance (Hiệu suất) > Main (Chính)

Các lệnh profile() và profileEnd() trong Console hiện bắt đầu và dừng phân tích CPU trong luồng Main (Chính) của bảng điều khiển Performance (Hiệu suất).

Vấn đề về Chromium: 1429191.

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

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

Ngoài ra, mã 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.

Đã di chuyển kênh Web Vitals

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

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

Cả kênh Các 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 thẻ này cũng không tương tác so với các thẻ thay thế có nhiều tính năng hơn và cung cấp thông tin chi tiết hơn khi được nhấp vào.

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

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

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

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển đã lên kế hoạch 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 CPU JavaScript.

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

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

Vấn đề về Chromium: 1428026.

Thông tin nổi bật khác

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

• Color Picker (Công cụ chọn màu) hiện phát hiện các giá trị HWB ngoài gam màu khi bị cắt (1429271).
• Bảng điều khiển Nguồn:
  • Bật tính năng làm nổi bật cú pháp JSON cho bản đồ nguồn (1385374).
  • Ngừng hiển thị thông báo "Đã phát hiện bản đồ nguồn" khi bạn tắt bản đồ nguồn theo cách thủ công (1423718).
• Console hiện cho phép bạn đánh giá các biểu thức JavaScript chưa hoàn chỉnh bằng tổ hợp phím Ctrl + Enter và xuất ra lỗi cú pháp (1314700).
• Hộp thoại chỉnh sửa điểm ngắt hiện có nút đóng. Trước đây, bạn phải nhấn phím Enter hoặc bỏ tiêu điểm hộp thoại (1412980).

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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 ý kiến phản hồi và yêu cầu về 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.