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ơ tuỳ chỉnh trong phần cài đặt Settings > Điều tiết rồi chọn thông số đó trong bảng Network (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 khả năng hỗ trợ lồng ghép CSS trong Phần tử > Kiểu

Thẻ Phần tử > Kiểu cải thiện khả năng hỗ trợ lồng ghép CSS và giờ đây hiển thị các kiểu lồng nhau có chế độ 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

Để lọc bỏ tạp âm khỏi biểu đồ hình ngọn lửa trong Hiệu suất > Chính, bạn hiệ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).

Dấu vết này có trong trình đơn Công cụ more_vert > Xem dấu vết không đ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 phần 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 > Bản cập nhật 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

Giờ đây, phần Ứng dụng > Bộ nhớ > 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ì cộng dữ liệu sử dụng của các phần tử con khớp với bộ lọc, thanh trạng thái đã thêm dữ liệu của phần tử 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àu của mã đã sử dụng giờ đây sẽ 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 trường hợp khiếm thị không có 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 cứ 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ố trong 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.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59