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

Bảng điều khiển Tự động điền mới

Phiên bản này mang bảng điều khiển Tự động điền mới đến DevTools. 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 bằng địa chỉ đã lưu một cách thuận tiện. Bảng điều khiển 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 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 hồ sơ, hãy nhấp vào nút Điền biểu mẫu ... bất kỳ, nhấp vào Gửi, sau đó trong cửa sổ 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ở DevTools và kích hoạt một sự kiện tự động điền: chọn một trường 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ở ra 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 bài viết Tìm hiểu về biểu mẫu và Tự động điền.

Tính năng điều tiết mạng nâng cao cho WebRTC

Với việc bổ sung mới 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 để kiểm thử việc triển khai giao tiếp theo thời gian thực mà không cần sử dụng phần mềm bên thứ ba.

Các thông số mới là: Packet Loss (Tỷ lệ mất gói) (phần trăm), Packet Queue Length (Chiều dài hàng đợi gói) (số gói) và cờ check_box Packet Reordering (Sắp xếp lại gói).

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

Hãy 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 sử dụng máy ảnh. 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 do cuộn trong bảng điều khiển Ảnh động

Bảng điều khiển Ảnh động hiện cho phép bạn kiểm tra ảnh động do cuộn điều khiển.

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

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

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

Thẻ Elements (Thành phần) > Styles (Kiểu) cải thiện khả năng hỗ trợ lồng CSS và hiện hiển thị các kiểu được lồng bằng cách 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ứ trở nên ngắn gọn 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à hàm con trong biểu đồ hình ngọn lửa

Để lọc ra các giá trị không liên quan khỏi biểu đồ hình ngọn lửa trong phần 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 đồ hình ngọn lửa, hãy nhấp chuột phải vào một hàm rồi chọn một tuỳ chọn trong trình đơn theo bối cảnh.

Các hàm có phần tử con bị ẩn sẽ có nút arrow_drop_down Thả xuống ở bên phải. Di chuột lên mục này để xem số lượng phần tử con bị ẩn rồi nhấp vào mục đó để hiển thị lại các phần tử con đó. Để quay lại trạng thái ban đầu của biểu đồ hình 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).

Các mũi tên từ trình khởi tạo đã chọn đến các sự kiện mà trình khởi tạo đó đã khởi tạo

Trước đây, khi bạn chọn một sự kiện trong kênh Chính, kênh này sẽ hiển thị một mũi tên từ trình khởi tạo đến sự kiện đã chọn. Giờ đây, kênh cũng hiển thị một mũi tên từ sự kiện đã chọn đến sự kiện đã khởi tạo sự kiện đó (nếu có).

Ngoài ra, tất 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ó đường liên kết được đặt tên thay vì Hiện.

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

Lighthouse 11.6.0

Bảng điều khiển 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 check_box_outline_blank Bật tính năng lấy mẫu JS mới (chọn sử dụng). Chế độ cài đặt này bị tắt theo mặc định.

Việc bật tính năng lấy mẫu JS sẽ thêm 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 có trong more_vert Trình đơn công cụ > Xem dấu vết không bị điều tiết sau khi báo cáo Lighthouse được tạo.

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

Chú giải công cụ cho các danh mục đặc biệt trong Bộ nhớ > Ảnh chụp nhanh vùng nhớ khối xếp

Ảnh chụp nhanh vùng nhớ khối xếp trong bảng điều khiển 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. Giờ đây, khi bạn di chuột qua các đối tượng như vậy, bảng điều khiển Memory (Bộ nhớ) sẽ hiển thị chú giải công cụ có nội dung mô tả ngắn gọ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 > Bản cập nhật bộ nhớ

Phiên bản này mang đến một số nội dung cập nhật cho phần Application (Ứng dụng) > Storage (Bộ nhớ).

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

Giờ đây, phần Application (Ứng dụng) > Storage (Bộ nhớ) > Shared storage (Bộ nhớ dùng chung) sẽ cho bạn biết số byte mà một nguồn gốc sử dụng.

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

Vấn đề về Chromium: 324464353.

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

Chrome không còn dùng Web SQL nữa trong phiên bản 119 và xoá mã thông báo dùng thử không còn dùng nữa trong phiên bản này, vì vậy, bạn không thể sử dụng Web SQL nữa.

Theo đó, DevTools đã xoá mục Web SQL khỏi bảng điều khiển Application (Ứng dụng).

Vấn đề về Chromium: 327254049.

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

Phiên bản này mang đến một số nội dung 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 đã lọc. Trước đây, thay vì cộng dữ liệu sử dụng của các URL con khớp với bộ lọc, thanh trạng thái này cộng dữ liệu của URL mẹ.

• Màu của mã đã sử 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 mù màu xanh lục.

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

Có thể chúng tôi sẽ ngừng sử dụng bảng điều khiển Lớp

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

Vui lòng chia sẻ suy nghĩ và mối lo ngại của bạn trước khi nhóm đưa ra quyết định cuối cùng về việc ngừng sử dụng 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 sửa lỗi và cải tiến đá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).
  • Sửa bản xem trước ngăn xếp lệnh gọi trong cột Initiator (Trình khởi tạo) (327665602).
• Trình giám sát hiệu suất: 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, cũng hiển thị 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 hỗ trợ Công cụ phát triển C/C++ (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 tốt trong thẻ Tóm tắt (325314708).
• Ngăn: Giờ đây, bạn có thể đặt tiêu điểm vào các nút đóng Đóng, nhờ đó có thể đóng 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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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ố 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.
• Gửi tweet đến @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.