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

Bộ sưu tập chính thức của các tiện ích cho Trình ghi đã ra mắt

Bộ sưu tập chính thức gồm các tiện ích Recorder (Trình ghi) để xuất và phát lại hiện đã hoạt động.

Để mở bộ sưu tập trực tiếp từ Trình ghi, hãy chọn tải xuống Xuất > Tải tiện ích bổ sung... trên thanh thao tác ở đầu bảng điều khiển Trình ghi.

Cải tiến mạng

Phiên bản này có một số điểm cải tiến cho bảng điều khiển Mạng.

Lý do không thành công trong cột Trạng thái

Giờ đây, cột Trạng thái luôn hiển thị lý do không thực hiện được. Trước đây, bạn phải bật tính năng check_box Hàng yêu cầu lớn hoặc chọn yêu cầu trong bảng.

Vấn đề về Chromium: 1506760.

Trình đơn con Sao chép được cải thiện

Trình đơn phụ Sao chép của một yêu cầu hiện đã được sắp xếp hiệu quả hơn.

Ngoài ra, tuỳ chọn Copy as cURL (Sao chép dưới dạng cURL) sẽ sao chép đúng lệnh vào bảng nhớ tạm trên Windows.

Vấn đề về Chromium: 1267033, 1276452, 798498.

Điểm cải tiến về hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Breadcrumb trong Dòng thời gian

Giờ đây, Dòng thời gian ở đầu bảng điều khiển Hiệu suất cho phép bạn đặt các dấu vết và chuyển đổi giữa các dấu vết đó.

Để đặt một chuỗi liên kết, hãy chọn một phạm vi trên Dòng thời gian, di chuột qua phạm vi đó rồi nhấp vào nút N ms zoom_in. Bạn có thể tạo nhiều chuỗi liên kết lồng nhau liên tiếp. Để chuyển đổi giữa các mức thu phóng, hãy nhấp vào đường dẫn tương ứng trong chuỗi ở đầu Dòng thời gian. Hãy xem video tiếp theo để xem cách hoạt động của các chuỗi liên kết.

Vấn đề về Chromium: 1467739.

Trình khởi tạo sự kiện trong kênh Chính

Theo mặc định, kênh Hiệu suất > Chính hiện hiển thị các mũi tên kết nối trình khởi tạo và các sự kiện sau đây mà chúng đã gây ra.

• Vô hiệu hoá kiểu hoặc bố cục -> Tính toán lại kiểu hoặc Bố cục
• Yêu cầu khung ảnh động -> Khung ảnh động đã kích hoạt
• Yêu cầu lệnh gọi lại ở trạng thái rảnh -> Kích hoạt lệnh gọi lại ở trạng thái rảnh
• Install Timer (Cài đặt bộ hẹn giờ) -> Timer Fired (Đã kích hoạt bộ hẹn giờ)
• Tạo WebSocket -> Gửi... và Nhận WebSocket bắt tay hoặc Huỷ bỏ WebSocket

Để xem các mũi tên, hãy tìm một sự kiện như vậy trong dấu vết rồi nhấp vào sự kiện đó. Trước đây, tính năng này chỉ là một thử nghiệm.

Vấn đề về Chromium: 1434596.

Trình đơn bộ chọn thực thể máy ảo JavaScript cho Công cụ phát triển Node.js

Trong bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển Node.js, giờ đây, bạn có thể chọn một phiên bản máy ảo JavaScript trên trình đơn thả xuống tương ứng trong thanh thao tác. Một tính năng tương tự đã có trong Trình phân tích tài nguyên JavaScript sắp ngừng hoạt động.

Vấn đề về Chromium: 1511813.

Cải tiến thành phần

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Elements (Thành phần).

Ngoài hai tính năng tiếp theo, bảng điều khiển Elements (Phần tử) giờ đây ghi nhớ thẻ cuối cùng mà bạn mở, ví dụ: Computed (Tính toán) hoặc Properties (Thuộc tính).

Giờ đây, bạn có thể chỉnh sửa phần tử giả ::view-transition trong phần Kiểu

Giờ đây, bạn có thể chỉnh sửa các phần tử giả lập CSS ::view-transition trong Kiểu bằng cách sử dụng trang tính kiểu của trình kiểm tra.

Để biết thêm thông tin, hãy xem bài viết Chuyển đổi suôn sẻ và đơn giản bằng View Transitions API.

Vấn đề về Chromium: 1511233.

Hỗ trợ thuộc tính align-content cho các vùng chứa khối

Thuộc tính align-content hiện hoạt động với mọi vùng chứa khối, bao gồm table-caption và table-cell. Trước đây, thuộc tính này chỉ hoạt động với lưới và flex.

Vấn đề về Chromium: 1500511.

Phím tắt và lệnh mới trong mục Nguồn

Giờ đây, bạn có thể nhấn tổ hợp phím Cmd (Mac) / Ctrl (Win) + Shift + nhấp vào số dòng trong Sources (Nguồn) để tạo một điểm ghi nhật ký. Phím tắt này là tính năng bổ sung cho Cmd (Mac) / Ctrl (Win) hiện có + nhấp cho các điểm ngắt có điều kiện.

Trình đơn lệnh sẽ nhận lệnh Reveal hoạt động tệp mới trong thanh bên của trình điều hướng. Lệnh này hoạt động giống như lựa chọn tương ứng trong trình đơn thả xuống của Trình chỉnh sửa.

Vấn đề về Chromium: 1486933, 1467464.

Hỗ trợ tư thế cho các thiết bị có thể gập lại được mô phỏng

Chế độ thiết bị hiện cho phép bạn đặt tư thế của một thiết bị có thể gập lại được mô phỏng: Liên tục hoặc Gập lại. Tư thế liên tục tức là tư thế "phẳng" và gập lại tạo thành một góc giữa các phần của màn hình.

Ngoài ra, danh sách Thiết bị còn có một thiết bị có thể gập lại được mô phỏng: Asus Zenbook Fold.

Vấn đề về Chromium: 1066842.

Tuỳ chỉnh giao diện động

Công cụ cho nhà phát triển hiện tự động khớp với giao diện màu của Chrome. Cách đặt giao diện:

1. Mở một thẻ mới rồi nhấp vào chỉnh sửa Tuỳ chỉnh Chrome ở góc dưới cùng bên phải.
2. Trong phần Giao diện, hãy chọn một giao diện thông qua hình nền Thay đổi giao diện hoặc chọn một bảng màu.

Vấn đề về Chromium: 1483276.

Cảnh báo về việc ngừng sử dụng cookie của bên thứ ba trong bảng điều khiển Mạng và Ứng dụng

Giờ đây, cả bảng điều khiển Mạng và Ứng dụng đều làm nổi bật và hiển thị cảnh báo bên cạnh các cookie chịu ảnh hưởng của các quy định hạn chế của bên thứ ba trong Biện pháp chống theo dõi.

Trong mục Network (Mạng), hãy tìm một yêu cầu có biểu tượng cảnh báo warning, nhấp vào yêu cầu đó rồi mở thẻ Cookies (Cookie).

Trong Application (Ứng dụng), hãy chuyển đến Storage (Bộ nhớ) > Cookies (Cookie) rồi nhấp vào một miền. Những cookie được đánh dấu bằng màu vàng sẽ không được lưu trữ trong trình duyệt.

Di chuột lên biểu tượng cảnh báo để xem chú giải mô tả các vấn đề, rồi nhấp vào biểu tượng đó để mở thẻ Vấn đề có thêm thông tin.

Ngoài ra, các cookie trong bảng hiện được sắp xếp theo tên theo mặc định.

Vấn đề về Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 11.4.0. Xem danh sách đầy đủ các thay đổi. Trong số những thay đổi đáng chú ý có quy trình kiểm tra mới giúp bạn phát hiện xem trang web của mình có còn sử dụng cookie của bên thứ ba hay không.

Để tìm hiểu kiến thức cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Hỗ trợ tiếp cận

Phiên bản này có các điểm cải tiến về hỗ trợ tiếp cận sau:

• Khi bạn mở phần cài đặt Cài đặt > Thử nghiệm, hộp Tìm kiếm sẽ tự động được lấy tiêu điểm.
• Nút cancel (huỷ) Clear input (xoá dữ liệu đầu vào) trong phần Network (Mạng) > Filter (Bộ lọc) hiện có thể lấy tiêu điểm.
• Cây tệp trong Sources (Nguồn) > Page (Trang) hiện hiển thị chính xác ở chế độ tương phản cao.
• Giờ đây, trình đọc màn hình sẽ thông báo chính xác những nội dung sau:
  • Trạng thái của hộp đánh dấu trong Sources (Nguồn) > Breakpoints (Điểm ngắt).
  • Thông tin về vị trí và chỉ mục cho danh sách đề xuất.
  • Kết quả hành động khi thêm hoặc xoá một vị trí trong phần cài đặt Cài đặt > Vị trí.
  • Các nhóm quy tắc loại trừ (chung hoặc tuỳ chỉnh) trong phần cài đặt Cài đặt > Danh sách bỏ qua.

Vấn đề về Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Thông tin nổi bật khác

Dưới đây là một số nội dung sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

• Ảnh động:
  • Khắc phục lỗi hiển thị cửa sổ bật lên ảnh chụp màn hình nằm ngoài giới hạn (1506991).
  • Khắc phục lỗi các nút ảnh động đã xoá không được đánh dấu là đã xoá (1506561).
• Mạng:
  • Ghi đè tiêu đề: Sửa lỗi có biểu tượng dấu chấm màu tím sai trong thẻ Tiêu đề (1507856).
  • Bản xem trước: Khắc phục lỗi giải mã hai lần không cần thiết (1509336).
  • Khắc phục lỗi khiến các yêu cầu ngắn không xuất hiện (1509862).
• Application > IndexedDB: Sắp xếp lại các nút trong thanh thao tác để đảm bảo tính nhất quán với các bảng điều khiển khác (1393800).
• Cảm biến: Khắc phục lỗi không có vị trí không chính xác lệnh gọi lại thành công (1486859).
• Hiệu suất:
  • Giờ đây, nút Thu thập rác sẽ có biểu tượng thích hợp là "cây lau nhà" thay vì "thùng rác" (1507530).
  • Dấu vết hiệu suất hiện giữ lại dữ liệu khi điều hướng đến about:blank (1509947).

Tải các 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á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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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.

• 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác more_vert > Trợ giúp > Báo cáo sự cố trong 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 trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.