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

Bảng điều khiển mới cho tính năng Tự động điền

Phiên bản này mang đến bảng điều khiển Tự động điền mới cho Công cụ cho nhà phát triển. Tính năng Tự động điền của Chrome giúp bạn tự động điền thông tin vào biểu mẫu trên các trang web một cách thuận tiện bằng những địa chỉ đã lưu. Bảng Tự động điền mới cho phép bạn kiểm tra mối liên kết giữa các trường biểu mẫu, giá trị tự động điền được dự đoán và dữ liệu đã lưu.

Hãy dùng thử bảng điều khiển mới trên trang minh hoạ này bằng dữ liệu kiểm thử:

1. Trong phần Tự động điền thông tin trong hồ sơ, hãy nhấp vào một trong các nút Điền vào biểu mẫu ..., nhấp vào Gửi, sau đó trong hộp thoại Lưu địa chỉ?, hãy nhấp vào Lưu rồi quay lại trang có biểu mẫu.
2. Mở Công cụ cho nhà phát triển và kích hoạt một sự kiện tự động điền: chọn một trường trong biểu mẫu rồi chọn địa chỉ trong danh sách thả xuống.

Bảng điều khiển Tự động điền sẽ tự động mở và cho bạn thấy các trường biểu mẫu đã phát hiện, các trường mà tính năng tự động điền suy luận và các giá trị đã lưu.

Để tìm hiểu thêm, hãy xem phần Tìm hiểu về biểu mẫu và Tự động điền.

Tính năng hạn chế băng thông mạng nâng cao cho WebRTC

Với việc bổ sung các thông số liên quan đến gói vào hồ sơ điều tiết mạng tuỳ chỉnh, giờ đây, bạn có thể điều tiết các ứng dụng WebRTC ngay trong DevTools. Điều này rất hữu ích khi bạn muốn kiểm thử việc triển khai tính năng giao tiếp theo thời gian thực mà không cần dùng phần mềm của bên thứ ba.

Các thông số mới là: Tỷ lệ mất gói tin (phần trăm), Độ dài hàng đợi gói tin (số lượng gói tin) và cờ check_box Sắp xếp lại gói tin.

Để điều tiết một kết nối WebRTC, hãy chỉ định các thông số liên quan đến gói trong một hồ sơ tuỳ chỉnh trong settings Settings (Cài đặt) > Throttling (Điều tiết) rồi chọn hồ sơ đó trong bảng Network (Mạng).

Hãy dùng thử các thông số mới trên trang minh hoạ này. Trước tiên, hãy cho phép trang web sử dụng camera. Sau đó, trong bảng điều khiển Network (Mạng), hãy chọn hồ sơ tuỳ chỉnh mà bạn đã định cấu hình, rồi quay lại trang, nhấp vào Start (Bắt đầu) và Call (Gọi).

Vấn đề về Chromium: 41175925.

Hỗ trợ ảnh động dựa trên thao tác cuộn trong bảng điều khiển Ảnh động

Giờ đây, bảng điều khiển Ảnh động cho phép bạn kiểm tra ảnh động dựa trên thao tác cuộn.

Hãy dùng thử tính năng này trên trang minh hoạ này. Mở bảng Ảnh động rồi tải lại trang để chụp ảnh động dựa trên thao tác cuộn.

Một nhóm ảnh động được đánh dấu bằng biểu tượng chuột sẽ xuất hiện trong phần Tổng quan. Giờ đây, bạn có thể kiểm tra. Nhóm này cho thấy các giá trị pixel thay vì mili giây trong Dòng thời gian.

Cải thiện khả năng hỗ trợ lồng CSS trong Elements > Styles (Phần tử > Kiểu)

Thẻ Elements (Phần tử) > Styles (Kiểu) cải thiện khả năng hỗ trợ lồng CSS và hiện cho thấy các kiểu lồng nhau có thụt lề và trong dấu ngoặc nhọn. Lồng CSS là một cách để nhóm các quy tắc CSS lại với nhau, giúp mọi thứ bớt rườm rà và có cấu trúc hơn.

Vấn đề về Chromium: 40166888.

Bảng điều khiển Hiệu suất nâng cao

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.

Ẩn các hàm và phần tử con của chúng trong biểu đồ ngọn lửa

Để lọc bỏ các thành phần không liên quan khỏi biểu đồ ngọn lửa trong Hiệu suất > Chính, giờ đây, bạn có thể ẩn các hàm không liên quan và các hàm con của chúng. Trong biểu đồ ngọn lửa, hãy nhấp chuột phải vào một hàm rồi chọn một mục trong trình đơn theo bối cảnh.

Các hàm có hàm con bị ẩn sẽ có nút arrow_drop_down Thả xuống ở bên phải. Di chuột lên biểu tượng này để xem số lượng phần tử con bị ẩn và nhấp vào biểu tượng này để hiện lại các phần tử con đó. Để quay lại trạng thái ban đầu của biểu đồ ngọn lửa, hãy nhấp chuột phải vào một hàm rồi chọn Reset trace (Đặt lại dấu vết).

Mũi tên từ các đối tượng khởi tạo đã chọn đến các sự kiện mà đối tượng đó khởi tạo

Trước đây, khi bạn chọn một sự kiện trong bản theo dõi Chính, bản theo dõi sẽ cho thấy một mũi tên từ trình khởi tạo đến sự kiện đã chọn. Giờ đây, dấu vết cũng cho thấy một mũi tên từ sự kiện đã chọn đến sự kiện mà nó đã bắt đầu (nếu có).

Ngoài ra, tất cả các trình khởi tạo hiện đều có trường Trình khởi tạo cho trong thẻ Tóm tắt và cả trường Trình khởi tạo cho và Được khởi tạo bởi đều có các đường liên kết được đặt tên thay vì Hiển thị.

Các vấn đề về Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Bảng Lighthouse hiện chạy Lighthouse 11.6.0. Xem danh sách đầy đủ các thay đổi.

Trong số những thay đổi đáng chú ý, có chế độ cài đặt mới check_box_outline_blank Bật tính năng lấy mẫu JS. Theo mặc định, chế độ cài đặt này ở trạng thái tắt.

Việc bật tính năng lấy mẫu JS sẽ thêm các ngăn xếp lệnh gọi JavaScript chi tiết vào dấu vết hiệu suất nhưng có thể làm chậm quá trình tạo báo cáo.

Dấu vết này có trong more_vert Trình đơn Công cụ > Xem dấu vết không bị hạn chế sau khi báo cáo Lighthouse được tạo.

Để 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.

Chú thích cho các danh mục đặc biệt trong phần Memory (Bộ nhớ) > Heap snapshots (Ảnh chụp nhanh heap)

Ảnh chụp nhanh vùng nhớ khối xếp trong bảng Bộ nhớ có các nhóm đối tượng đặc biệt không dựa trên hàm khởi tạo. Khi bạn di chuột lên những đối tượng như vậy, bảng Bộ nhớ hiện sẽ cho bạn thấy một chú giải công cụ có nội dung mô tả ngắn và đường liên kết đến nội dung mô tả dài hơn trong tài liệu.

Vấn đề về Chromium: 41490331.

Ứng dụng > Tin cập nhật về bộ nhớ

Phiên bản này có một số điểm cập nhật cho Ứng dụng > Bộ nhớ.

Số byte được dùng cho bộ nhớ dùng chung

Giờ đây, mục Ứng dụng > Bộ nhớ > Bộ nhớ dùng chung sẽ cho bạn biết số byte mà một nguồn đã sử dụng.

Bộ nhớ dùng chung cho phép bạn có quyền ghi bộ nhớ không giới hạn trên nhiều trang web với quyền đọc bảo đảm quyền riêng tư.

Vấn đề về Chromium: 324464353.

Web SQL hoàn toàn không được dùng nữa

Chrome đã ngừng sử dụng Web SQL trong phiên bản 119 và xoá mã thông báo dùng thử trước khi ngừng sử dụng trong phiên bản này, nên bạn không thể sử dụng Web SQL nữa.

Tương tự, Công cụ cho nhà phát triển cũng đã xoá mục Web SQL khỏi bảng điều khiển Ứng dụng.

Vấn đề về Chromium: 327254049.

Cải tiến bảng điều khiển về mức độ sử dụng

Phiên bản này có một số điểm cập nhật cho bảng điều khiển Mức độ phù hợp:

• Thanh trạng thái hiện tính toán chính xác số liệu thống kê về mức sử dụng cho các URL được lọc. Trước đây, thay vì cộng dữ liệu sử dụng của các thành phần con khớp với bộ lọc, thanh trạng thái lại cộng dữ liệu của thành phần mẹ.

• Màu của mã đã dùng hiện là màu xám thay vì màu xanh lục để cải thiện khả năng hiển thị, đặc biệt là đối với người bị hội chứng mù màu xanh lục.

Vấn đề về Chromium: 41494198, 329253687.

Có thể chúng tôi sẽ loại bỏ bảng điều khiển Lớp

Có thể chúng tôi sẽ sớm loại bỏ bảng Lớp do ít người sử dụng. Giờ đây, bảng điều khiển sẽ hiển thị một biểu ngữ cảnh báo ở trên cùng.

Bạn có thể chia sẻ ý kiến và mối lo ngại của mình trước khi nhóm đưa ra quyết định cuối cùng về việc ngừng cung cấp bảng điều khiển này.

Ngừng sử dụng Trình phân tích tài nguyên JavaScript: Giai đoạn 4, giai đoạn cuối

Trong phiên bản này, bảng điều khiển Trình phân tích tài nguyên JavaScript đã ngừng hoạt động hoàn toàn và không thể bật lại được nữa.

Để phân tích hiệu suất CPU, hãy sử dụng bảng điều khiển Hiệu suất.

Vấn đề về Chromium: 40262073.

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:

• Mạng:
  • Khắc phục lỗi phân tích cú pháp không chính xác của cookie nhiều dòng (325410304).
  • Đã khắc phục lỗi xem trước ngăn xếp lệnh gọi trong cột Trình khởi tạo (327665602).
• Trình giám sát hiệu suất: Các hộp đánh dấu theo dõi hiện giống như trong phần còn lại của giao diện người dùng (1467464).
• Nguồn: Thêm tính năng làm nổi bật cú pháp cho tài liệu XHTML (327940244).
• Cài đặt > Thiết bị: Galaxy Fold cũ được thay thế bằng Galaxy Z Fold 5 mới hơn (40113439).
• Hiệu suất: Tất cả kết quả tìm kiếm trùng khớp hiện được làm nổi bật khi tìm kiếm bằng tổ hợp phím Ctrl/Cmd+F (1523279).
• Tài nguyên dành cho nhà phát triển: Giờ đây, bảng này cũng cho thấy các tài nguyên được tải thông qua tiện ích ngôn ngữ, chẳng hạn như tiện ích Chrome C/C++ DevTools Support (DWARF) (40746829).
• Hiệu suất: Khắc phục ngăn xếp lệnh gọi bị cắt và bố cục không phù hợp trong thẻ Tóm tắt (325314708).
• Ngăn: close Đóng Giờ đây, người dùng có thể lấy tiêu điểm cho các nút Đóng, nhờ đó có thể đóng các bảng điều khiển bằng bàn phím.

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.