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 cung cấp 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 biểu mẫu trên các trang web bằng địa chỉ 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 việc liên kết giữa các trường trong biểu mẫu, giá trị tự động điền 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 với dữ liệu thử nghiệm:

  1. Trong 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ỉ?, 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 biểu mẫu rồi chọn địa chỉ từ 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 do 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 về biểu mẫuTự động điền.

Chế độ đ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 ứng dụng WebRTC của mình ngay trong Công cụ cho nhà phát triển. Việc này rất hữu ích khi bạn kiểm thử việc triển khai hoạt động giao tiếp theo thời gian thực mà không cần sử 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 (phần trăm), Độ 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 Cài đặt > Điều tiết rồi chọn điều tiết đó trong bảng điều khiển Mạng.

Hãy thử các tham 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 đầuGọi.

Vấn đề với Chromium: 41175925.

Hỗ trợ ảnh động di chuyể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 cuộn.

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

Một nhóm ảnh động 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 sẽ xuất hiện trong Tổng quan. Bây giờ, bạn có thể kiểm tra ứng dụng. Nhóm hiển thị 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 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à hiện 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 mọi thứ trở nên ít chi tiết hơn và có cấu trúc hơn.

Kiểu trước và sau khi thêm thụt lề và bao quanh các kiểu lồng nhau trong dấu ngoặc nhọn.

Vấn đề với Chromium: 40166888.

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

Phiên bản này có 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à con của chúng trong biểu đồ hình ngọn lửa

Để lọc bỏ nhiễu 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 mục trong trình đơn theo bối cảnh.

Trước và sau khi thêm một trình đơn theo bối cảnh, bạn có thể ẩn các hàm và con của chúng.

Các hàm có thành phần con bị ẩn có nút Thả xuống arrow_drop_down ở bên phải. Di chuột qua mục đó để xem số trẻ bị ẩn rồi nhấp vào để hiển thị lại trẻ. Để trở về 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.

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

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

Các mũi tên trước và sau hiển thị các mũi tên từ sự kiện được 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ả 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 Người khởi tạo cho và trường Được khởi tạo bởi đều có đường liên kết được đặt tên thay vì Tiết lộ.

Sự cố với 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 số những thay đổi đáng chú ý là chế độ cài đặt mới có tên là check_box_outline_blank Bật tính năng lấy mẫu JS. Chế độ cài đặt này được tắt theo mặc định.

Trước và sau khi thêm chế độ cài đặt chọn tham gia lấy mẫu JS.

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 hoạt động theo dõi 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ó (bên trái) và có lấy mẫu JS (bên phải).

Bạn có thể truy cập dấu vết trong more_vert Trình đơn công cụ > 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.

Sự cố 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 khởi tạo. Khi bạn 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 chú giải công cụ có 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.

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ới Chromium: 41490331.

Ứng dụng > Bản cập nhật bộ nhớ

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

Số byte sử 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 biểu thị số byte được dùng cho bộ nhớ dùng chung.

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

Vấn đề với Chromium: 324464353.

Web SQL hoàn toàn không 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ử việc ngừng sử dụng trong phiên bản này, vì vậy, bạn không thể sử dụng Web SQL 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ới Chromium: 327254049.

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

Phiên bản này cung cấp một vài điểm cập nhật cho bảng điều khiển Phạm vi lập chỉ mục:

  • Thanh trạng thái hiện 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 các nhà xuất bản con khớp với bộ lọc, thanh trạng thái đã thêm dữ liệu của nhà xuất bản mẹ.

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

  • Màu của mã được 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 hội chứng thị giác không có màu xanh lục.

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

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

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

Bảng điều khiển Lớp có thể sắp không được dùng nữa do mức sử dụng thấp. Lúc này, bảng điều khiển sẽ hiển thị một biểu ngữ cảnh báo ở trên cùng.

Biểu ngữ cảnh báo thông báo việc có thể ngừng hoạt động ở đầu bảng điều khiển Lớp.

Vui lòng chia sẻ suy nghĩ và mối lo ngại của bạn trước khi nhóm Google đưa ra quyết định cuối cùng về việc không dùng bảng điều khiển nữa.

Không dùng Trình phân tích tài nguyên JavaScript: Giai đoạn 4, cuối cùng

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

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

Vấn đề với Chromium: 40262073.

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

Dưới đây là một số bản 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).
    • Sửa lỗi xem trước ngăn xếp lệnh gọi trong cột Initiator (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 đánh dấu cú pháp cho các tài liệu AGP (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: Giờ đây, tất cả kết quả tìm kiếm đã khớp sẽ đượ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ẽ hiển thị 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 của Chrome Hỗ trợ công cụ cho nhà 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 hợp lệ trong thẻ Tóm tắt (325314708).
  • Ngăn: Đóng nút Đóng hiện có thể làm tâm điểm, vì vậy, có thể đóng 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video 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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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