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

Sofia Emelianova
Sofia Emelianova

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

Phiên bản này đưa bảng điều khiển Tự động điền mới vào Công cụ cho nhà phát triển. Tự động điền của Chrome cung cấp một cách thuận tiện để tự động điền biểu mẫu trên trang web bằng địa chỉ đã lưu. 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 dự đoán và dữ liệu đã lưu.

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

  1. Trong Tự động điền hồ sơ, nhấp vào bất kỳ nút Điền vào biểu mẫu ... nào, nhấp vào Gửi, sau đó trong cửa sổ hộp thoại Lưu địa chỉ?, nhấp vào Lưu và 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 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à hiển thị cho bạn 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 dự đoán và các giá trị đã lưu.

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

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

Tăng cường điều tiết mạng cho WebRTC

Với việc bổ sung mới các tham 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 Công cụ cho nhà phát triển. Điều này rất hữu ích để kiểm tra việc triển khai giao tiếp theo thời gian thực của bạn mà không cần sử dụng phần mềm bên thứ ba.

Các tham số mới là: Mất gói (phần trăm), Chiều dài hàng đợi gói (số gói) và cờ Sắp xếp lại gói check_box.

Trước và sau khi thêm các tuỳ chọn mới liên quan đến gói vào hồ sơ điều tiết tuỳ chỉnh.

Để đ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ơ tùy chỉnh trong phần cài đặt Cài đặt > Điều chỉnh rồi chọn tuỳ chọn đó trong bảng điều khiển Mạ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 sử dụng máy ảnh. Sau đó, trong bảng điều khiển 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 này, nhấp vào Bắt đầu rồi nhấp vào Gọi.

Vấn đề về Chromium: 41175925.

Hỗ trợ ảnh động theo hướng cuộn trong bảng điều khiển Ảnh động

Bảng điều khiển Animations hiện cho phép bạn kiểm tra ảnh động theo hướng cuộn.

Hãy thử tính năng này trên trang minh hoạ này. Mở bảng điều khiển Animations (Ảnh động) rồi tải lại trang để chụp ảnh động theo hướng cuộn.

Một nhóm các ảnh động di chuyển theo hướng cuộn được đánh dấu bằng biểu tượng chuột.

Nhóm ảnh động được đánh dấu bằng biểu tượng chuột chuột xuất hiện trong phần Tổng quan. Bây giờ, bạn có thể kiểm tra vấn đề này. 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 tử > Kiểu

Phần tử > Thẻ Styles (Kiểu) cải thiện khả năng hỗ trợ lồng CSS và giờ đây hiển thị các kiểu lồng nhau có thụt lề và trong dấu ngoặc nhọn. Lồng ghép CSS là một cách để nhóm các quy tắc CSS lại với nhau và làm cho các quy tắc trở nên ít chi tiết và có cấu trúc hơn.

Trước và sau khi thêm khoảng thụt lề cũng như đặt các kiểu lồng trong dấu ngoặc nhọ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à thành phần con trong biểu đồ hình ngọn lửa

Cách lọc tạp âm khỏi biểu đồ hình ngọn lửa trong phần Hiệu suất > Main, giờ đây bạn có thể ẩn các hàm không liên quan và các hàm con. 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 mục trong trình đơn theo bối cảnh.

Phần trước và sau khi thêm trình đơn theo bối cảnh giúp bạn ẩn các hàm và phần tử con của các hàm đó.

Các hàm chứa phần tử con bị ẩn có nút Thả xuống arrow_drop_down ở bên phải. Hãy di chuột qua biểu tượng đó để xem số lượng trẻ bị ẩn, rồi nhấp vào đó để hiện lại. Để 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 Đặt lại dấu vết.

Mũi tên từ những người khởi tạo được chọn đến những sự kiện mà họ đã khởi tạo

Trước đây, khi bạn chọn một sự kiện trên kênh Chính, bản nhạc đã 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 một mũi tên từ sự kiện đã chọn đến sự kiện mà sự kiện đó bắt đầu (nếu có).

Mũi tên trước và sau hiển thị các mũi tên từ sự kiện đã chọn đến sự kiện đã bắt đầu và đường liên kết được đặt tên thay vì hiển thị.

Ngoài ra, tất cả các trình khởi tạo giờ đây đề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à trường Người khởi tạo cho đều có đường liên kết được đặt tên thay vì Khám phá.

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.

Một trong những thay đổi đáng chú ý là chế độ chọn sử dụng mới check_box_outline_blank Bật tính năng lấy mẫu JS. Chế độ cài đặt này bị tắt theo mặc định.

Trước và sau khi thêm chế độ cài đặt lấy mẫu JS chọn sử dụng.

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.

Theo dõi hiệu suất không có lấy mẫu JS (trái) và có lấy mẫu JS (phải).

Bạn có thể xem dấu vết trong trình đơn Công cụ của more_vert > Xem dấu vết không được điều tiết sau khi báo cáo Lighthouse được tạo.

Để tìm hiểu thông tin 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ú thích cho các danh mục đặc biệt trong Bộ nhớ > Ảnh chụp nhanh của vùng nhớ khối xếp

Ảnh chụp nhanh của vùng nhớ khối xếp trong bảng điều khiển Memory (Bộ nhớ) có các nhóm đối tượng đặc biệt không dựa trên hàm dựng. Khi di chuột qua các đối tượng như vậy, bảng điều khiển Memory (Bộ nhớ) giờ đây sẽ hiển thị cho bạn một phần chú thích kèm theo nội dung mô tả ngắn và một đường liên kết đến phần mô tả dài hơn trong tài liệu.

Phần trước và sau khi hiển thị chú giải công cụ mang tính mô tả cho các nhóm đối tượng đặc biệt.

Vấn đề về Chromium: 41490331.

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

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

Số byte dùng cho bộ nhớ dùng chung

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

Phần trước và sau thể hiện số byte được dùng cho bộ nhớ dùng chung.

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

Vấn đề về Chromium: 324464353.

API Web SQL hiện không còn được dùng nữa

Chrome ngừng sử dụng Web SQL từ phiên bản 119 và xoá mã thử nghiệm ngừng sử dụng trong phiên bản này. Do đó, bạn không thể sử dụng Web SQL được nữa.

Sau đó, Công cụ cho nhà phát triển đã xoá phần 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 mức độ phù hợp

Phiên bản này cung cấp một số nội dung cập nhật cho bảng điều khiển Phạm vi bao phủ:

  • Giờ đây, thanh trạng thái sẽ tính toán chính xác số liệu thống kê sử dụng cho các URL đã lọc. Trước đây, thay vì thêm dữ liệu sử dụng của nhà xuất bản con khớp với bộ lọc, thì tính năng này đã thêm dữ liệu của nhà xuất bản mẹ.

Số liệu thống kê con trước và sau khi tính toán chính xác số liệu thống kê con trùng khớp.

  • Mã đã sử dụng giờ đây sẽ có 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 khiếm thị không nhìn thấy màu xanh lục.

Trước và sau khi thay đổi màu của đoạn mã đã sử dụng sang màu xám.

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

Có thể bảng điều khiển Lớp sẽ không được dùng nữa

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

Biểu ngữ cảnh báo thông báo về việc có thể ngừng sử dụng ở đầu bảng điều khiển Lớp.

Hãy chia sẻ suy nghĩ và mối lo ngại của bạn trước khi nhóm chúng tôi đưa ra quyết định cuối cùng về việc ngừng sử dụng bảng điều khiển.

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 cùng

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

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

Vấn đề về Chromium: 40262073.

Nội dung 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:

  • Mạng:
    • Khắc phục lỗi phân tích cú pháp cookie nhiều dòng không chính xác (325410304).
    • Khắc phục bản xem trước ngăn xếp lệnh gọi trong cột Initiator (Trình khởi tạo) (327665602).
  • Giám sát hiệu suất: Giờ đây, các hộp đánh dấu theo dõi đã 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 các tài liệu IME (327940244).
  • Cài đặt > Thiết bị: Chiếc Galaxy Fold cũ được thay thế bằng chiếc Galaxy Z Fold 5 mới hơn (40113439).
  • Hiệu suất: Giờ đây, tất cả kết quả tìm kiếm đã khớp đượ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ạn cũng sẽ thấy các tài nguyên được tải thông qua các tiện ích ngôn ngữ, chẳng hạn như tiện ích Hỗ trợ C/C++ của Chrome cho nhà phát triển (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 hợp lệ trong thẻ Tóm tắt (325314708).
  • Ngăn: nút đóng Đóng hiện có thể làm tâm điểm để bạn có thể đóng các bảng điều khiển bằng bàn phím.

Tải 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ủa bạn. 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, 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 đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
  • Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > Trợ giúp > Báo cáo vấn đề về 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 về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.

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.