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

Jecelyn Yeen

Đang xoá Bảng điều khiển hiệu suất khi tải lại

Giờ đây, bảng điều khiển Hiệu suất sẽ xoá cả ảnh chụp màn hình và dấu vết khi bạn nhấp vào nút Bắt đầu lập hồ sơ và tải lại trang.

Trước đây, bảng điều khiển Hiệu suất hiển thị một dòng thời gian kèm theo ảnh chụp màn hình của các bản ghi trước đó. Điều này khiến khó biết được thời điểm bắt đầu đo lường thực tế. Giờ đây, bảng điều khiển luôn chuyển đến trang about:blank trước để đảm bảo rằng quá trình ghi bắt đầu bằng một dấu vết trống. Điều này phù hợp với bảng điều khiển Thông tin chi tiết về hiệu suất vốn đã tương tự.

Đang xoá Bảng điều khiển hiệu suất khi tải lại.

Vấn đề về Chromium: 1101268, 1382044

Thông tin cập nhật về ứng dụng Máy ghi âm

Xem và đánh dấu mã của luồng người dùng trong Máy ghi âm

Trình ghi hiện cung cấp chế độ xem mã phân tách, giúp bạn xem mã luồng người dùng của bạn dễ dàng hơn. Để truy cập vào chế độ xem mã, hãy mở một quy trình người dùng rồi nhấp vào Show Code (Hiện mã).

Máy ghi âm sẽ làm nổi bật mã tương ứng khi bạn di chuột qua từng bước ở bên trái, giúp bạn dễ dàng theo dõi quy trình của mình. Bạn có thể thay đổi định dạng mã bằng cách sử dụng trình đơn thả xuống, điều này cho phép bạn chuyển đổi giữa các định dạng như tập lệnh Nightwatch Test.

Chế độ xem mã trong Trình ghi.

Vấn đề về Chromium: 1385489

Tuỳ chỉnh các loại bộ chọn của bản ghi

Bạn có thể tạo các bản ghi chỉ ghi lại những loại bộ chọn quan trọng đối với bạn. Với tùy chọn mới để tùy chỉnh các loại bộ chọn khi tạo bản ghi mới, bạn có thể bao gồm hoặc loại trừ các bộ chọn như vai trò của người dùng, đảm bảo bạn chỉ ghi lại các bộ chọn mà bạn muốn trong luồng người dùng của mình.

Tuỳ chọn mới để tuỳ chỉnh các loại bộ chọn.

Vấn đề về Chromium: 1384431

Chỉnh sửa luồng người dùng trong khi ghi

Máy ghi âm hiện cho phép chỉnh sửa trong quá trình ghi, giúp bạn linh hoạt chỉnh sửa theo thời gian thực. Bạn không cần phải kết thúc bản ghi để điều chỉnh nữa.

Chỉnh sửa trong khi ghi luồng người dùng.

Vấn đề về Chromium: 1381971

In đẹp tại chỗ tự động

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. Để định dạng nội dung, bạn phải nhấp vào nút in đẹp theo cách thủ công. Ngoài ra, nội dung được in đẹp không xuất hiện trong cùng một thẻ mà nằm trong một thẻ ::formatted khác.

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

Vấn đề về Chromium: 1383453, 1382752, 1382397

Cải thiện tính năng làm nổi bật cú pháp và xem trước cùng dòng cho Vue, SCSS và nhiều sản phẩm khác

Bảng điều khiển Sources (Nguồn) đã nâng cao tính năng đánh dấu cú pháp cho một số định dạng tệp được sử dụng rộng rãi, cho phép bạn đọc mã dễ dàng hơn và nhận ra cấu trúc của mã, bao gồm Vue, JSX, Dart, LESS, SCSS, SASS và CSS cùng dòng.

Làm nổi bật cú pháp trong Vue.

Ngoài ra, Công cụ cho nhà phát triển cũng cải thiện tính năng xem trước cùng dòng cho Vue, HTML cùng dòng và TSX. Hãy di chuột qua một biến để xem trước giá trị của biến đó.

Bản xem trước cùng dòng cho Vue.

Ngoài ra, Công cụ cho nhà phát triển hiện hiển thị bản đồ nguồn của một biểu định kiểu trong bảng điều khiển Nguồn. Ví dụ: khi bạn mở tệp SCSS, bạn có thể truy cập vào tệp CSS có liên quan bằng cách nhấp vào liên kết bản đồ nguồn.

Đường liên kết đến bản đồ nguồn cho SASS.

Vấn đề về Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392, 1973}

Tính năng tự động hoàn thành nhất quán và công thái trong Console

Công cụ cho nhà phát triển giúp nâng cao trải nghiệm tự động hoàn thành bằng cách triển khai các thay đổi sau:

  • Tab luôn được dùng để tự động hoàn thành.
  • Hành vi của Arrow right và Enter thay đổi tuỳ theo ngữ cảnh.
  • Trải nghiệm tự động hoàn thành sẽ nhất quán trên các trình chỉnh sửa văn bản, trong bảng Bảng điều khiển, Nguồn và Phần tử

Ví dụ: sau đây là những gì sẽ xảy ra khi bạn nhập cons vào Bảng điều khiển:

  • Bảng điều khiển hiển thị danh sách các đề xuất tự động hoàn thành, với một đường viền chấm nhẹ xung quanh tuỳ chọn trên cùng cho biết quá trình di chuyển chưa bắt đầu. Đường viền chấm xung quanh tùy chọn tự động hoàn thành trên cùng.

  • Bảng điều khiển sẽ thực thi dòng khi bạn nhấn Enter. Trước đây, tính năng này sẽ tự động hoàn thành dòng với đề xuất hàng đầu. Để tự động hoàn tất, hãy nhấn phím Tab hoặc Arrow Right. Thực thi dòng trên Enter.

  • Bảng điều khiển đánh dấu lựa chọn đã chọn khi bạn di chuyển qua danh sách đề xuất bằng phím tắt Arrow up và Arrow down. Nội dung đánh dấu trong khi di chuyển đến nội dung đề xuất.

  • Để tự động hoàn thành bằng mục đã chọn trong khi di chuyển, hãy sử dụng các phím trên bàn phím Tab, Enter hoặc Arrow Right. Tự động hoàn tất bằng tuỳ chọn đã chọn trong khi điều hướng.

  • Khi chỉnh sửa ở giữa mã, chẳng hạn như khi con trỏ nằm trong khoảng từ n đến s, hãy sử dụng Tab để tự động hoàn thành, Enter để thực thi dòng và Arrow Right để di chuyển con trỏ về phía trước. Chỉnh sửa ở giữa mã.

Vấn đề về Chromium: 1399436, 1276960

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:

  • Đã giải quyết được sự cố hồi quy trong Công cụ cho nhà phát triển mà không dừng được ở câu lệnh debugger trong tập lệnh cùng dòng. (1385374)
  • Chế độ cài đặt mới trong Bảng điều khiển cho phép bạn mở rộng hoặc thu gọn thông báo của console.trace() theo mặc định. Bật/tắt cài đặt thông qua phần Cài đặt > Lựa chọn ưu tiên > Mở rộng thông báo console.trace() theo mặc định. (1139616)
  • Ngăn Đoạn trích trong bảng Nguồn hỗ trợ tính năng tự động hoàn thành nâng cao, tương tự như Bảng điều khiển. (772949) Tự động hoàn thành trong Đoạn mã.

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   Thêm > 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.