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

Jecelyn Yeen

Máy ghi âm: Sao chép dưới dạng các lựa chọn cho các bước, phát lại trong trang, trình đơn theo bối cảnh của bước

Các lựa chọn mới cho việc sao chép trong bảng điều khiển Máy ghi âm.

Mở một luồng người dùng hiện có trong Máy ghi âm. Trước đây, khi bạn phát lại luồng người dùng, Công cụ cho nhà phát triển sẽ luôn bắt đầu phát lại bằng cách di chuyển đến hoặc tải lại trang.

Với các bản cập nhật mới nhất, Máy ghi âm sẽ hiển thị riêng bước di chuyển. Bạn có thể nhấp chuột phải và xoá nút đó để phát lại trong trang!

Ngoài ra, bạn có thể nhấp chuột phải vào một bước rồi sao chép bước đó vào bảng nhớ tạm trong bảng điều khiển *Máy ghi âm thay vì xuất toàn bộ quy trình của người dùng. Cách này cũng hoạt động với phần mở rộng. Ví dụ: thử sao chép một bước dưới dạng tập lệnh Kiểm thử đồng hồ đêm. Với tính năng này, bạn có thể dễ dàng cập nhật bất kỳ tập lệnh hiện có nào.

Trước đây, bạn chỉ có thể truy cập vào trình đơn bước thông qua nút 3 dấu chấm. Giờ đây, bạn có thể nhấp chuột phải vào vị trí bất kỳ trên bước đó để truy cập vào trình đơn.

Các sự cố với Chromium: 1322313, 1351649, 1322313, 1339767

Hiện tên chức năng thực tế trong bản ghi buổi biểu diễn

Giờ đây, bảng điều khiển Performance (Hiệu suất) sẽ hiển thị tên hàm thực tế và nguồn của các hàm đó trong dấu vết nếu có bản đồ nguồn.

Hiện thông tin trước và sau khi so sánh tên hàm sẽ xuất hiện trong bảng điều khiển Hiệu suất.

Trong ví dụ này, tệp nguồn được giảm kích thước trong quá trình sản xuất. Ví dụ: hàm sayHi được rút gọn dưới dạng n và hàm takeABreak được rút gọn dưới dạng o trong bản minh hoạ này.

Hiển thị tệp trước và sau khi rút gọn.

Trước đây, khi bạn ghi lại một dấu vết trong bảng điều khiển Hiệu suất, dấu vết chỉ hiển thị cho bạn tên hàm được rút gọn. Điều này khiến việc gỡ lỗi khó hơn.

Với những thay đổi mới nhất, Công cụ cho nhà phát triển hiện đọc bản đồ nguồn và hiển thị tên hàm cũng như vị trí nguồn thực tế.

Các vấn đề với Chromium: 1364601, 1364601

Phím tắt mới trong bảng điều khiển Bảng điều khiển và nguồn

Bạn có thể chuyển đổi giữa các thẻ trong bảng điều khiển Sources (Nguồn) bằng cách sử dụng: Trên MacOS, Function + Command + Mũi tên lên và down Trên Windows và Linux, Control + Page up hoặc down

Hơn nữa, bạn có thể chuyển đến các mục đề xuất tự động hoàn thành bằng tổ hợp phím Ctrl + N và Ctrl + P trên MacOS, tương tự như Emac. Ví dụ: bạn có thể nhập window. vào Console và sử dụng các phím tắt này để điều hướng.

Ngoài ra, Công cụ cho nhà phát triển hiện chấp nhận Mũi tên phải để chỉ tự động hoàn thành ở cuối dòng. Ví dụ: hộp thoại tự động hoàn thành sẽ xuất hiện khi bạn đang chỉnh sửa nội dung nào đó ở giữa mã. Khi bạn nhấn phím Mũi tên phải, rất có thể bạn sẽ muốn đặt con trỏ đến vị trí tiếp theo thay vì tự động hoàn thành. Thay đổi này về trải nghiệm người dùng phù hợp hơn với quy trình biên soạn của bạn.

Sự cố Chromium: 1167965, 1172535, 1371585. 1369503

Cải thiện tính năng gỡ lỗi JavaScript

Dưới đây là một số điểm cải tiến về cách gỡ lỗi JavaScript trong bản phát hành này:

new.target là một thuộc tính meta cho phép bạn phát hiện xem một hàm hoặc hàm khởi tạo có được gọi bằng toán tử mới hay không. Giờ đây, bạn có thể ghi new.target vào Bảng điều khiển để kiểm tra giá trị của tệp đó trong quá trình gỡ lỗi. Trước đây, thao tác này sẽ trả về lỗi khi bạn nhập new.target.
Đối tượng WeakRef cho phép bạn giữ một tham chiếu yếu đến một đối tượng khác mà không ngăn đối tượng đó thu thập rác. Công cụ cho nhà phát triển hiện hiển thị bản xem trước cùng dòng cho giá trị và đánh giá tệp tham chiếu yếu ngay trong bảng điều khiển trong quá trình gỡ lỗi. Trước đây, bạn phải gọi rõ ràng là "deref" từ chúng để giải quyết vấn đề này.
Sửa bản xem trước cùng dòng cho biến được đổ bóng. Trước đây, giá trị hiển thị không chính xác.
Gỡ rối mã nguồn tên biến trong các hàm Generator và async trong ngăn Scope (Phạm vi) của bảng điều khiển Sources (Nguồn).

Các sự cố với Chromium: 1267690, 1246863 1371322, 1311637

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:

Hỗ trợ thêm gợi ý cho các thuộc tính CSS không hoạt động trong ngăn Styles – chiều cao và chiều rộng cùng dòng, thuộc tính linh hoạt và lưới. (1373597, 1178508, 1178508,1178508)
Khắc phục tính năng làm nổi bật cú pháp. Mã này hoạt động không đúng cách kể từ lần nâng cấp trình soạn thảo mã gần đây trong Công cụ cho nhà phát triển. (1290182)
Ghi lại đúng cách các sự kiện thay đổi dữ liệu đầu vào sau khi sự kiện làm mờ trong Máy ghi âm. (1378488)
Cập nhật tập lệnh phát lại Puppeteer khi xuất để có trải nghiệm gỡ lỗi tốt hơn trong Máy ghi âm. (1351649)
Hỗ trợ ghi lại và phát lại trong Máy ghi âm để gỡ lỗi từ xa. (1185727)
Sửa lỗi phân tích cú pháp các tên biến CSS đặc biệt trong var(). Trước đây, Công cụ cho nhà phát triển không hỗ trợ phân tích cú pháp các biến có các ký tự thoát như var(--fo\ o). , (1378992)

[Thử nghiệm] Nâng cao trải nghiệm người dùng trong việc quản lý các điểm ngắt

Ngăn Breakpoints (Điểm ngắt) hiện tại cung cấp rất ít hỗ trợ trực quan trong việc giám sát tất cả các điểm ngắt. Hơn nữa, các thao tác thường dùng sẽ bị ẩn khỏi trình đơn theo bối cảnh.

Thiết kế lại trải nghiệm người dùng thử nghiệm này mang lại cấu trúc cho ngăn Breakpoints (Điểm ngắt) và cho phép nhà phát triển truy cập nhanh vào các tính năng thường dùng như chỉnh sửa và xoá điểm ngắt.

Dưới đây là một số điểm nổi bật:

Cả hai lựa chọn tạm dừng đều nằm trong ngăn Breakpoints (Điểm ngắt). Chúng có nhãn văn bản rõ ràng giúp các tùy chọn dễ hiểu.
Các điểm ngắt được nhóm theo tệp, sắp xếp theo số dòng hoặc số cột. Bạn có thể thu gọn và mở rộng.**
Các tuỳ chọn mới để xoá và chỉnh sửa điểm ngắt khi di chuột qua điểm ngắt hoặc tên tệp trong ngăn Breakpoint.

Vui lòng đọc toàn bộ nội dung thay đổi trong phần RFC (đã đóng) của chúng tôi và để lại ý kiến phản hồi tại đây.

Hiển thị ngăn Điểm ngắt trước và sau khi thiết kế lại.

Các sự cố với Chromium: 1346231, 1324904

[Thử nghiệm] Tự động in đẹp tại chỗ

Giờ đây, bảng điều khiển Sources (Nguồn) sẽ tự động in đẹp các tệp nguồn rút gọn tại chỗ. Bạn có thể nhấp vào nút in đẹp { } để huỷ thao tác này.

Trước đây, bảng điều khiển Nguồn hiển thị nội dung rút gọn theo mặc định. Bạn phải tự nhấp vào nút in đẹp để định dạng nội dung. Hơn nữa, nội dung được in đẹp không xuất hiện trong cùng một tệp mà xuất hiện trong một thẻ ::formatted khác.

Hiển thị tệp giảm kích thước trước và sau bản in đẹp tại chỗ tự động.

Vấn đề với Chromium: 1164184

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.