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 gồm 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 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 xuống... trên thanh thao tác ở đầu bảng điều khiển Trình ghi.

Cải thiện mạng

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

Lý do xảy ra lỗi trong cột Trạng thái

Cột Trạng thái hiện luôn cho biết lý do không thành công. Trước đây, bạn phải bật check_box Các hàng yêu cầu lớn hoặc chọn yêu cầu trong bảng.

Vấn đề về Chromium: 1506760.

Cải thiện trình đơn phụ Sao chép

Giờ đây, trình đơn phụ Sao chép của một yêu cầu được sắp xếp gọn gàng hơn.

Ngoài ra, giờ đây, lựa chọn 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.

Các 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.

Đường dẫn trong Dòng thời gian

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

Để đặt một dấu mốc, hãy chọn một phạm vi trên Dòng thời gian, di chuột lên phạm vi đó rồi nhấp vào nút N mili giây zoom_in. Bạn có thể tạo một số đường liên kết dạng đánh dấu 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 ở trên cùng của Dòng thời gian. Hãy xem video tiếp theo để biết đường dẫn xuất hiện như thế nào.

Vấn đề về Chromium: 1467739.

Trình khởi tạo sự kiện trong bản theo dõi chính

Theo mặc định, giờ đây, thẻ Hiệu suất > Chính sẽ cho thấy các mũi tên kết nối những đối tượng khởi tạo và các sự kiện tiếp theo mà đối tượng đó gây ra.

• Kiểu hoặc bố cục không hợp lệ -> Tính toán lại kiểu hoặc Bố cục
• Yêu cầu khung ảnh động -> Đã kích hoạt khung ảnh động
• 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 (Bộ hẹn giờ cài đặt) -> Timer Fired (Đã kích hoạt bộ hẹn giờ)
• Tạo WebSocket -> Gửi... và Nhận giao thức bắt tay của WebSocket 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 là một thử nghiệm.

Vấn đề về Chromium: 1434596.

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

Trong bảng Hiệu suất của Node.js DevTools, giờ đây, bạn có thể chọn một phiên bản VM JavaScript trong trình đơn thả xuống tương ứng trên thanh thao tác. Một tính năng tương tự đã có trong JavaScript Profiler (sắp ngừng hoạt động).

Vấn đề về Chromium: 1511813.

Cải thiện các phần tử

Phiên bản này có một số điểm cải tiến đối với bảng Phần tử.

Ngoài 2 tính năng tiếp theo, bảng Elements (Phần tử) hiện ghi nhớ thẻ gần đây nhất 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 Styles

Giờ đây, bạn có thể chỉnh sửa các phần tử giả ::view-transition CSS trong Kiểu bằng cách sử dụng biểu đị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 mượt mà và đơn giản bằng View Transitions API.

Vấn đề về Chromium: 1511233.

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

Giờ đây, thuộc tính align-content hoạt động với mọi vùng chứa khối, bao gồm cả 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.

Lệnh và phím tắt mới trong phần Nguồn

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

Trình đơn lệnh có lệnh mới là Hiển thị tệp đang hoạt động trong thanh bên của trình điều hướng. Lệnh này có chức năng tương tự 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 đề cập đến vị trí "phẳng" và khi gập lại sẽ 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ị sẽ có thêm một thiết bị có thể gập lại được mô phỏng mới: Asus Zenbook Fold.

Vấn đề về Chromium: 1066842.

Tạo giao diện động

Giờ đây, Công cụ cho nhà phát triển sẽ 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 loại bỏ dần cookie của bên thứ ba trong bảng điều khiển Mạng và Ứng dụng

Cả bảng điều khiển Mạng và Ứng dụng hiện đều làm nổi bật và hiển thị cảnh báo bên cạnh những cookie chịu ảnh hưởng của các hạn chế đối với bên thứ ba do tính năng Chống theo dõi đặt ra.

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

Trong Application (Ứng dụng), hãy chuyển đến Storage (Bộ nhớ) > Cookies 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ú thích mô tả các vấn đề và nhấp vào biểu tượng đó để mở thẻ Vấn đề có thêm thông tin.

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

Các vấn đề về Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Bảng 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ó một 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 những kiến thức cơ bản về cách sử dụng bảng 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ó những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

• Khi bạn mở cài đặt Cài đặt > Thử nghiệm, hộp Tìm kiếm hiện sẽ tự động được lấy tiêu điểm.
• Giờ đây, bạn có thể lấy tiêu điểm cho nút huỷ Xoá dữ liệu đầu vào trong phần Mạng > Bộ lọc.
• 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 Nguồn > Điểm ngắt.
  • Thông tin về vị trí và chỉ mục cho danh sách đề xuất.
  • Kết quả của hành động khi thêm hoặc xoá một vị trí trong phần cài đặt Cài đặt > Vị trí.
  • 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.

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

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

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

• Ảnh động:
  • Khắc phục lỗi khiến cửa sổ bật lên của ảnh chụp màn hình hiển thị ngoài phạm vi (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 đề: Đã khắc phục lỗi biểu tượng dấu chấm màu tím giả trong thẻ Tiêu đề (1507856).
  • Xem trước: Đã khắc phục lỗi giải mã kép không cần thiết (1509336).
  • Đã khắc phục một lỗi khiến các yêu cầu ngắn không xuất hiện (1509862).
• Application (Ứng dụng) > IndexedDB: Sắp xếp lại các nút trong thanh thao tác để 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 một lỗi với lệnh gọi lại thành công không chính xác về vị trí không có sẵn (1486859).
• Hiệu suất:
  • Nút Thu gom rác hiện có biểu tượng phù hợp là "cây lau nhà" thay vì "thùng rác" (1507530).
  • Giờ đây, tính năng theo dõi hiệu suất sẽ giữ lại dữ liệu khi bạn chuyển đến about:blank (1509947).

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.