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 114)

Sofia Emelianova

Jecelyn Yeen

Hỗ trợ gỡ lỗi WebAssembly

Công cụ cho nhà phát triển sẽ bật Cài đặt > Thử nghiệm > 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 nội dung 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 ứng dụng Wasm bằng tất cả thông tin gỡ lỗi được cung cấp 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 tra tính năng 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à xem qua từng bước mã trong bản minh hoạ Mandelbrot.

Vấn đề với Chromium: 1414289.

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

Giờ đây, bước qua trong mã ban đầu của bạn sẽ tránh được việc tạm dừng khi tháo rời (tệp .wasm). Trước đây, chiến dịch sẽ tạm dừng ở đó.

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

Hành vi này được bật theo mặc định trong 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 mục Lựa chọn ưu tiên, rồi chọn Nguồn.

Vấn đề với 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 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 chân cong màu đỏ.

Để xem tính năng này, hãy bật Cài đặt > Thử nghiệm > Đá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 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 điều khiển Vấn đề báo cáo.

Di chuột lên 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à cung cấp gợi ý về vấn đề.

Vấn đề với Chromium: 1399414.

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

Giờ đây, bảng điều khiển Recorder (Ghi lại) cho phép bạn thêm câu nhận định ngay trong quá trình ghi, với tất cả dữ liệu thời gian chạy được cung cấp 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 một cách nhanh chóng. Xem video để xem các câu nhận định được áp dụng trong bản minh hoạ giỏ cà phê.

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

Các 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.

Ví dụ: bạn cũng có thể định cấu hình các bước để xác nhận, chẳng hạn như câu lệnh có điều kiện trong JavaScript, số 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, Máy ghi âm giờ đây sẽ ghi nhớ định dạng tập lệnh ưu tiên của bạn trong chế độ xem mã cạnh nhau và trình đơn bước nhấp chuột phải.

Vấn đề với 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 10.1.0. Tất cả các lượt kiểm tra liên quan đến URL giờ đây được nhóm theo số liệu thống kê thực thể và số liệu thống kê tổng hợp 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ẻ cùng 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 lượt 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.

Sự cố Chromium: 772558.

Nâng cao hiệu suất

`performance.mark()` cho thấy 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() sẽ 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à 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ông tin thời gian khi di chuột trong mục Thời gian.

Vấn đề với Chromium: 1426762.

Lệnh `profile()` điền sẵn thông tin trong phần Performance > Main (Hiệu suất > 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() tạo một hồ sơ trong bảng điều khiển Hiệu suất.

Sự cố Chromium: 1429191.

Cảnh báo về 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 dài hơn 200 mili giây 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 thẻ Hiệu suất > Tóm tắt.

Cảnh báo INP.

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

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

Di chuyển kênh Các chỉ số quan trọng về trang web

Bảng 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 liên quan trong kênh Thời gian khi di chuột.
Nhóm phụ Việc cần làm dài. Bạn đã có thể tìm thấy những việc cần làm đó trong kênh Chính được tô bóng màu đỏ và có hình tam giác màu đỏ.

Cả hai kênh Các chỉ số quan trọng về trang web và Tác vụ dài đều chứa thông tin bị trùng lặp ở nơi khác. Các giải pháp này cũng không mang tính tương tác so với các giải pháp thay thế có đầy đủ tính năng 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 Các chỉ số quan trọng về trang web sang theo dõi Thời gian.

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

Tìm hiểu thêm về Các chỉ số quan trọng về trang web.

Không 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 đã lên kế hoạch ngừng sử dụng Trình phân tích JavaScript, đồng thời 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.

Phiên bản 114 của Công cụ cho nhà phát triển bắt đầu giai đoạn 3 của việc ngừng sử dụng Trình phân tích tài nguyên JavaScript 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 đó từ 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, rồi chọn 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).

Sự cố Chromium: 1428026.

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

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

Giờ đây, Công cụ chọn màu có thể 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 Sources (Nguồn):
- Bật tính năng đánh dấu 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, Console (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à báo cáo 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

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