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, bản phát lại trong trang, trình đơn theo bối cảnh của bước

Mở luồng người dùng hiện có trong Trình 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 quá trình phát lại bằng cách 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 từng bước điều hướng. Bạn có thể nhấp chuột phải và xoá cụm 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 *Recorder (Máy ghi âm) thay vì xuất toàn bộ luồng người dùng. Cách này cũng hoạt động với tiện ích. Ví dụ: thử sao chép một bước dưới dạng tập lệnh Thử nghiệm đồng hồ ban đê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ỉ truy cập được vào trình đơn bước thông qua nút có biểu tượng 3 dấu chấm. Giờ đây, bạn có thể nhấp chuột phải vào vị trí bất kỳ trong bước này để truy cập vào trình đơn.

Vấn đề về Chromium: 1322313, 1351649, 1322313, 1339767

Hiện tên chức năng thực tế trong bản ghi hiệu suất

Giờ đây, bảng điều khiển 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.

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 thành n và hàm takeABreak được rút gọn thành o trong demo này.

Trước đây, khi bạn ghi lại một dấu vết trong bảng Hiệu suất, dấu vết đó chỉ hiện các tên hàm được rút gọn. Việc 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 giờ đây sẽ đọc bản đồ nguồn và hiển thị tên hàm thực tế cũng như vị trí nguồn.

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

Phím tắt mới trong Bảng điều khiển và Bảng điều khiển 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, tổ hợp phím Function + Command + Mũi tên lên và mũi tên xuống Trên Windows và Linux: Control + Page up hoặc down

Ngoài ra, bạn có thể di chuyển trong các đề xuất tự động hoàn thành bằng tổ hợp phím Ctrl + Ctrl và Ctrl trên MacOS, tương tự như Emac. Ví dụ: bạn có thể nhập window. trong 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ỉ chấp nhận biểu tượng 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 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 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 soạn thảo của bạn.

Vấn đề về 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 trong Bảng điều khiển để kiểm tra giá trị của nó trong khi gỡ lỗi. Trước đây, hàm 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. Giờ đây, Công cụ cho nhà phát triển hiển thị bản xem trước cùng dòng cho giá trị và đánh giá 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 "deref" cho các ứng dụng đó để giải quyết vấn đề này.
• Sửa lỗi bản xem trước cùng dòng cho biến bị đổ bóng. Trước đây, giá trị hiển thị là không chính xác.
• Gỡ rối mã nguồn cho tên biến trong các hàm Generator và async trong ngăn Phạm vi trên bảng điều khiển Nguồn.

Vấn đề về Chromium: 1267690, 1246863 1371322, 1311637

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗ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 Kiểu – các thuộc tính chiều cao và chiều rộng cùng dòng, linh hoạt và lưới. (1373597, 1178508, 1178508,1178508)
• Sửa lỗi đánh dấu cú pháp. Mã này không hoạt độ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 sự kiện làm mờ 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 Recorder (Trình ghi). (1351649)
• Hỗ trợ tính năng ghi và phát lại trong Trình 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] Trải nghiệm người dùng nâng cao 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 ít hỗ trợ trực quan trong việc giám sát mọi đ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.

Bản thiết kế lại trải nghiệm người dùng thử nghiệm này mang cấu trúc đến ngăn Đ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, chẳng hạn như chỉnh sửa và xoá các đ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 Điểm ngắt. Các lựa chọn này có nhãn văn bản rõ ràng giúp các lựa 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 (Điểm ngắt).

Bạn có thể đọc toàn bộ nội dung thay đổi trong RFC (đã đóng) và để lại ý kiến phản hồi tại đây.

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

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

Giờ đây, bảng điều khiển Sources (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 in đẹp { } để huỷ thao tác này.

Trước đây, theo mặc định, bảng điều khiển Nguồn hiển thị nội dung đã giảm kích thước. 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 được hiển thị trong cùng một tệp mà nằm trong một thẻ ::formatted khác.

Vấn đề về Chromium: 1164184

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

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

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.