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

Jecelyn Yeen

Trình ghi: Sao chép dưới dạng tuỳ 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 tuỳ chọn sao chép mới trong bảng điều khiển của Trình ghi.

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, DevTools 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 các bản cập nhật mới nhất, Trình ghi sẽ hiển thị riêng bước điều hướng. Bạn có thể nhấp chuột phải và xoá phầ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 và sao chép bước đó vào bảng nhớ tạm trong bảng *Recorder (Trình ghi) thay vì xuất toàn bộ luồng 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 Kiểm thử Nightwatch. 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 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ỳ trên bước để truy cập vào trình đơn.

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

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

Bảng điều khiển Hiệu suất hiện 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ị trước và sau khi so sánh tên hàm hiển thị trong bảng điều khiển Hiệu suất.

Trong ví dụ này, một tệp nguồn được rút gọn trong quá trình phát hành chính thức. 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.

Hiển thị các 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 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, DevTools hiện đọ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

Các phím tắt mới trong bảng điều khiển Console (Bảng điều khiển) và Sources (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 (Hàm) + Command (Lệnh) + Mũi tên lên và mũi tên xuống Trên Windows và Linux, Control (Ctrl) + Page up (Mũi tên lên) hoặc down (Mũi tên xuống)

Ngoài ra, bạn có thể di chuyển qua 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. trong Console và sử dụng các phím tắt này để di chuyển.

Ngoài ra, DevTools 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ẽ hiển thị 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 về trải nghiệm người dùng này 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 tính năng 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 thuộc tính siêu dữ liệu 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 lại new.target trong Console để kiểm tra giá trị của biến này trong quá trình gỡ lỗi. Trước đây, hàm này sẽ trả về lỗi khi bạn nhập new.target. Hiển thị trước và sau khi so sánh quá trình gỡ lỗi đánh giá 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 thập rác. Giờ đây, DevTools sẽ 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" trên các đối tượng đó để phân giải. Hiển thị trước và sau khi so sánh kết quả đánh giá WeakRef trong quá trình gỡ lỗi.
  • Sửa bản xem trước cùng dòng cho biến được che. Trước đây, giá trị hiển thị không chính xác. Hiển thị bản xem trước nội tuyến trước và sau khi so sánh cho biến được che.
  • Giải mã tên biến trong các hàm Generator và async trong ngăn Phạm vi (Scope) trong bảng điều khiển Nguồn (Sources).

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ố bản 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 – chiều cao và chiều rộng nội tuyến, thuộc tính flex và lưới. (1373597, 1178508, 1178508,1178508)
  • Sửa lỗi làm nổi bật cú pháp. Tính năng 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 DevTools. (1290182)
  • Ghi lại các sự kiện thay đổi đầu vào đúng cách 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 Trình ghi. (1351649)
  • Hỗ trợ tính năng ghi và phát lại trong Máy ghi âm để gỡ lỗi từ xa. (1185727)
  • Khắc phục lỗi phân tích cú pháp tên biến CSS đặc biệt trong var(). Trước đây, DevTools không hỗ trợ 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 trong việc 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 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 tuỳ chọn tạm dừng đều nằm trong ngăn Breakpoints (Điểm ngắt). Các nút này có nhãn văn bản rõ ràng giúp người dùng hiểu rõ các lựa chọn.
  • 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 đó.**
  • 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).

Đọc toàn bộ nội dung thay đổi trong 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.

Vấn đề về 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. 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 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 in đẹp không xuất hiện trong cùng một tệp, mà trong một thẻ ::formatted khác.

Hiển thị tệp rút gọn trước và sau khi tự động in đẹp tại chỗ.

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.