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

Jecelyn Yeen

Trình ghi: Các lựa chọn sao chép cho các bước, phát lại trên trang, trình đơn theo bối cảnh của bước

Mở một luồng người dùng hiện có trong Trình ghi. 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 chuyển đến hoặc tải lại trang.

Với bản cập nhật mới nhất, Trình ghi sẽ hiển thị riêng từng bước điều hướng. Bạn có thể nhấp chuột phải và xoá để thực hiện thao tác 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 và sao chép bước đó vào bảng tạm trong bảng điều khiển *Trình ghi thay vì xuất toàn bộ quy trình của người dùng. Tính năng này cũng hoạt động với tiện ích. Ví dụ: hãy thử sao chép một bước dưới dạng tập lệnh Nightwatch Test. Với tính năng này, bạn có thể dễ dàng cập nhật mọi tập lệnh hiện có.

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 một vị trí bất kỳ trên bước để truy cập vào trình đơn.

Các vấn đề về Chromium: 1322313, 1351649, 1322313, 1339767

Hiện tên hàm thực tế trong các bản ghi hiệu suất

Giờ đây, bảng điều khiển Hiệu suất sẽ cho biết 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.

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

Trước đây, khi bạn ghi lại một dấu vết trong bảng điều khiển Performance (Hiệu suất), dấu vết đó chỉ cho bạn thấy tên hàm được rút gọn. Điều này khiến việc gỡ lỗi trở nên khó khăn 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à cho biết tên hàm thực tế cũng như vị trí nguồn.

Vấn đề về Chromium: 1364601, 1364601

Các phím tắt mới trong bảng điều khiển Console và Sources

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

Ngoài ra, bạn có thể di chuyển giữa cá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ư Emacs. Ví dụ: bạn có thể nhập window. vào Console và dùng các phím tắt này để di chuyển.

Ngoài ra, Công cụ cho nhà phát triển hiện chỉ chấp nhận mũi tên phải để 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 nhấn phím Mũi tên phải, rất có thể bạn muốn đặt con trỏ vào 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 sáng tác của bạn.

Vấn đề về Chromium: 1167965, 1172535, 1371585. 1369503

Cải thiện quy trình gỡ lỗi JavaScript

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

• new.target là một siêu thuộc tính 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 nhật ký new.target trong Bảng điều khiển để kiểm tra giá trị của nhật ký này 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 đó bị thu gom rác. Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị bản xem trước cùng dòng cho giá trị và đánh giá trực tiếp tham chiếu yếu 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 "deref" trên các đối tượng này để giải quyết vấn đề.
• Đã sửa lỗi xem trước cùng dòng cho biến bị che khuất. Trước đây, giá trị hiển thị không chính xác.
• Huỷ làm rối tên biến trong các hàm Generator và async trong ngăn Phạm vi trong bảng Nguồn.

Các vấn đề về Chromium: 1267690, 1246863 1371322, 1311637

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:

• Hỗ trợ thêm các gợi ý cho các thuộc tính CSS không hoạt động trong ngăn Kiểu – chiều cao và chiều rộng nội tuyến, các thuộc tính linh hoạt và lưới. (1373597, 1178508, 1178508,1178508)
• Đã sửa lỗi đánh dấu cú pháp. Tính năng này hoạt động không đúng cách kể từ khi trình chỉnh sửa mã gần đây được nâng cấp 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 sự kiện on blur trong Trình ghi. (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 Trình ghi. (1351649)
• Hỗ trợ ghi và phát lại trong Trình ghi để gỡ lỗi từ xa. (1185727)
• Đã sửa lỗi phân tích cú pháp 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ợ việc phân tích cú pháp các biến có ký tự thoát như var(--fo\ o). , (1378992)

[Thử nghiệm] Cải thiện trải nghiệm người dùng khi quản lý điểm ngắt

Ngăn Breakpoints (Điểm ngắt) hiện tại cung cấp ít trợ giúp trực quan trong việc giám sát tất cả các điểm ngắt. Ngoài ra, các thao tác thường dùng sẽ bị ẩn sau 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.

Sau đâ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). Các lựa chọn này có nhãn văn bản rõ ràng giúp người dùng tự 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 mục này.**
• Các lựa 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 Điểm ngắt.

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

Vấn đề về Chromium: 1346231, 1324904

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

Giờ đây, bảng điều khiển Nguồn sẽ tự động tạo bản in đẹp cho các tệp nguồn đã rút gọn tại chỗ. Bạn có thể nhấp vào nút pretty print (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 được rút gọn theo mặc định. Bạn phải nhấp vào nút in đẹp theo cách thủ công để định dạng nội dung. Ngoài ra, 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.

Vấn đề về Chromium: 1164184

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.
• Hãy 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 sử dụng 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.