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

Jecelyn Yeen

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

Giờ đây, bảng điều khiển Performance (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 Start profiling and loading page (Bắt đầu phân tích 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 với ảnh chụp màn hình của các bản ghi trước đó. Điều này khiến bạn khó biết được thời điểm đo lường thực tế. Giờ đây, bảng điều khiển sẽ 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. Thông tin này phù hợp với bảng Thông tin chi tiết về hiệu suất vốn đã làm tương tự.

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

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

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

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

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

Máy ghi âm đánh dấu 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 để chuyển đổi giữa các định dạng, chẳng hạn như tập lệnh Kiểm thử đồng hồ đêm.

Chế độ xem mã trong Máy ghi âm.

Vấn đề với Chromium: 1385489

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

Bạn có thể tạo bản ghi chỉ chứa loại bộ chọn quan trọng đối với bạn. Với lựa chọn mới để tuỳ 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ư XPath, đảm bảo bạn chỉ ghi lại các bộ chọn mình muốn trong luồng người dùng.

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

Vấn đề với Chromium: 1384431

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

Máy ghi âm giờ đây cho phép chỉnh sửa trong khi 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 ghi để điều chỉnh nữa.

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

Vấn đề với Chromium: 1381971

Tự động tạo bản in đẹp tại chỗ

Giờ đây, bảng điều khiển Sources (Nguồn) sẽ tự động in 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 { } để hủy 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. Để định dạng nội dung, bạn phải nhấp vào nút in đẹp theo cách thủ công. Hơn nữa, nội dung được in đẹp không xuất hiện trong cùng một thẻ 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.

Các sự cố với Chromium: 1383453, 1382752, 1382397

Cải thiện cú pháp và tính năng xem trước cùng dòng cho Vue, SCSS và các nền tảng 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 bản 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 đó.

Xem trước cùng dòng cho Vue.

Ngoài ra, Công cụ cho nhà phát triển hiện cò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 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 đường liên kết bản đồ nguồn.

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

Các sự cố với Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392}1471

Tính năng Tự động hoàn thành nhất quán và hợp lý trong Play Console

Công cụ cho nhà phát triển cải thiện 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 mang tính nhất quán trên các trình chỉnh sửa văn bản, trong bảng điều khiển 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 đường viền chấm nhỏ xung quanh tuỳ chọn trên cùng cho biết quá trình thao tác chưa bắt đầu.
Bảng điều khiển thực thi dòng khi bạn nhấn Enter. Trước đây, tính năng này tự động hoàn thành dòng với đề xuất hàng đầu. Để tự động hoàn thành, hãy nhấn Tab hoặc Arrow Right.
Bảng điều khiển sẽ làm nổi bật tuỳ 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.
Để tự động hoàn tất bằng tùy chọn đã 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.
Khi chỉnh sửa giữa mã, ví dụ như khi con trỏ nằm trong khoảng từ n đến s, 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.

Các sự cố với Chromium: 1399436, 1276960

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:

Chúng tôi đã khắc phục sự cố hồi quy trong Công cụ cho nhà phát triển (không dừng lại ở câu lệnh debugger trong tập lệnh cùng dòng). (1385374)
Một 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 console.trace() theo mặc định. Bật/tắt chế độ 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 mã trong bảng điều khiển 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ả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.