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 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 Hiệu suất hiển thị một dòng thời gian có ảnh chụp màn hình từ các bản ghi trước đó. Điều này khiến bạ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 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. Đ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 đã làm như vậy).

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

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

Xem và làm nổi bật mã của luồng người dùng trong Trình ghi

Trình ghi 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. Để 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ã.

Trình ghi 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 trình đơn thả xuống. Trình đơn này cho phép bạn chuyển đổi giữa các định dạng như tập lệnh Nightwatch Test.

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 bản ghi chỉ ghi lại những loại bộ chọn mà bạn quan tâm. 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ể thêm hoặc loại trừ các bộ chọn như XPath, đảm bảo bạn chỉ ghi lại những bộ chọn mình muốn trong luồng người dùng.

Vấn đề về Chromium: 1384431

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

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

Vấn đề về 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 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. Để đị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à xuất hiện trong một thẻ ::formatted khác.

Các vấn đề về Chromium: 1383453, 1382752, 1382397

Làm nổi bật cú pháp và xem trước nội tuyến hiệu quả hơn cho Vue, SCSS và các nội dung khác

Bảng điều khiển Nguồn đã cải thiện tính năng làm nổi bật cú pháp cho một số định dạng tệp được dùng rộng rãi, giúp bạn đọc mã dễ dàng hơn và nhận ra cấu trúc của mã, bao gồm cả Vue, JSX, Dart, LESS, SCSS, SASS và CSS nội tuyến.

Ngoài ra, DevTools 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. Di chuột qua một biến để xem trước giá trị của biến đó.

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 Sources (Nguồn). Ví dụ: khi mở một 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 sourcemap.

Các vấn đề về Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Tính năng Tự động hoàn thành nhất quán và phù hợp với người dùng trong Bảng điều khiển

DevTools 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 cho tính năng tự động hoàn thành.
• Hành vi của Arrow right và Enter sẽ khác nhau tuỳ theo ngữ cảnh.
• Tính năng tự động hoàn thành hoạt động nhất quán trên các trình chỉnh sửa văn bản, trong các bảng Console, Sources và Elements

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

• Bảng điều khiển hiển thị danh sách các đề xuất dạng tự động hoàn thành, với đường viền chấm mờ xung quanh lựa chọn trên cùng cho biết rằng quá trình điều hướng chưa bắt đầu.

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

• Bảng điều khiển sẽ làm nổi bật lựa chọn đã chọn khi bạn di chuyển qua danh sách đề xuất bằng các phím tắt Arrow up và Arrow down.

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

• Khi chỉnh sửa ở giữa mã, chẳng hạn như khi con trỏ nằm giữa n và s, hãy 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 vấn đề về Chromium: 1399436, 1276960

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:

• Chúng tôi đã giải quyết một vấn đề hồi quy trong Công cụ cho nhà phát triển, trong đó vấn đề này không dừng ở câu lệnh debugger trong các tập lệnh nội tuyến. (1385374)
• Một chế độ cài đặt Bảng điều khiển mới cho phép bạn mở rộng hoặc thu gọn các thông báo console.trace() theo mặc định. Bật/tắt chế độ cài đặt thông qua 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 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.
• Để lại 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 về 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.