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

Công cụ cho nhà phát triển cho phép 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) 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 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 mà bạn có thể sử dụng:

• 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 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 C/C++ DevTools Support (DWARF) và thực hiện từng bước trong mã trong bản minh hoạ Mandelbrot.

Vấn đề về Chromium: 1414289.

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

Lệnh Step over (Bước qua) trong mã gốc hiện tránh việc tạm dừng trong quá trình gỡ lỗi (tệp .wasm). Trước đây, quá trình tải sẽ tạm dừng ở đó.

Tuy nhiên, quá trình gỡ lỗi từng bước sẽ kết thúc khi nó nằm ngoài hàm mà nó 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 (Phần tử) có thể làm nổi bật các vấn đề đó bằng đường gạch chân lượn sóng màu đỏ.

Để dùng thử 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 (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ử) rồi kiểm tra trang minh hoạ này.

Di chuột lên 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 đề được phát hiện và cung cấp thông tin về lỗi.

Vấn đề về Chromium: 1399414.

Các câu lệnh trong Trình ghi

Giờ đây, bảng điều khiển Trình ghi cho phép bạn thêm các câu khẳng định ngay trong quá trình 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 lệnh, hãy bắt đầu ghi 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 lệnh. Trình ghi sẽ 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ác câu khẳng định hoạt động trong bản minh hoạ xe 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ử.
• 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), khả năng hiển thị của 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 ghi nhớ định dạng tập lệnh mà bạn muốn trong chế độ xem mã song song và trình đơn bước nhấp chuột phải.

Vấn đề về Chromium: 1423624.

Lighthouse 10.1.1

Giờ đây, bảng Lighthouse 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ả các hoạt động 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ẻ theo danh mục để bạn dễ dàng xác định mục đích của họ trên trang.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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.

Nâng cao hiệu suất

performance.mark() cho biết thời gian khi di chuột trong mục Hiệu suất > Thời gian

Giờ đây, phương thức performance.mark() sẽ cho biết 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 thông tin vào mục Hiệu suất > Chính

Các lệnh profile() và profileEnd() trong Bảng điều khiển hiện bắt đầu và dừng việc lập hồ sơ CPU trong luồng chính của bảng Hiệu suất.

Vấn đề về Chromium: 1429191.

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

Những 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ã nhận dạng của lượt tương tác đã được di chuyển từ chú thích sang Tóm tắt.

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

Bản nhạc Web Vitals đã được chuyển

Bảng điều khiển Hiệu suất đã xoá các chỉ số 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 liên quan trong bản phụ đề Dấu thời gian khi di chuột.
• Subtrack Long Tasks (Tác vụ dài). Bạn có thể tìm thấy những tác vụ như vậy trong bản theo dõichính được tô bóng màu đỏ và có một tam giác màu đỏ.

Cả hai chỉ số 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. Chúng cũng không có tính tương tác so với các lựa chọn thay thế có nhiều tính năng hơn, cung cấp thông tin chi tiết hơn khi được nhấp vào.

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

Tìm hiểu thêm về Web Vitals.

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

Ngay từ Chrome 58, nhóm Công cụ cho nhà phát triển đã lên kế hoạch ngừng cung cấp Trình phân tích tài nguyên JavaScript và yêu cầu nhà phát triển Node.js và Deno sử dụng bảng điều khiển Hiệu suất để lập hồ sơ hiệu suất CPU JavaScript.

DevTools 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 gồm 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 điều khiển này thông qua Cài đặt > 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 .

Để lập hồ sơ hiệu suất CPU, hãy 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ố điểm sửa lỗi đáng chú ý trong bản phát hành này:

• Giờ đây, Công cụ chọn màu sẽ phát hiện các giá trị HWB nằm 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).
• Giờ đây, Bảng điều khiể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 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 huỷ lấy 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 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.

• 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.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" trên YouTube.

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.