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

Matthias Rohmer

Xuất bản: Ngày 25 tháng 8 năm 2026

Chrome 152 mang đến những điểm cải tiến đáng kể cho hoạt động gỡ lỗi mạng bằng cách gửi lại yêu cầu và kiểm tra tải trọng nhị phân, các thành phần trang trí phần tử tuỳ chỉnh và tính năng lồng CSS nâng cao trong Elements, Các chỉ số quan trọng chính của trang web cho các thao tác điều hướng mềm trong Chỉ số hiệu suất trực tiếp, xuất bảng có cấu trúc trong Bảng điều khiển và các điểm cải tiến cho máy chủ MCP của Công cụ cho nhà phát triển.

Công cụ cho nhà phát triển dành cho nhân viên hỗ trợ

Bản phát hành v1.7.0 mới nhất của máy chủ MCP Chrome DevTools sẽ xây dựng các chức năng gỡ lỗi bộ nhớ đã được giới thiệu trước đó cho các tác nhân lập trình như Antigravity, Claude, Codex và các tác nhân khác:

• Thông tin chi tiết về đối tượng snapshot của vùng nhớ heap (get_heapsnapshot_object_details): Kiểm tra chi tiết các thuộc tính đối tượng JavaScript, tên lớp và đường dẫn giữ lại gốc GC ngay từ snapshot của vùng nhớ heap.
• Lọc bối cảnh V8 gốc: Lọc các đối tượng trong snapshot của vùng nhớ heap theo ngữ cảnh thực thi gốc và kiểm tra các ngữ cảnh gốc trong phần tóm tắt snapshot.
• Cải thiện độ ổn định và vòng đời của trình nền: Thêm tính năng giữ lại yêu cầu mạng có giới hạn cho mỗi lượt điều hướng, xác thực mã nhận dạng phiên, cảnh báo về sự không khớp phiên bản CLI với trình nền và giải phóng trình chạy một cách trơn tru khi xử lý bối cảnh.

Để tìm hiểu thêm và bắt đầu, hãy truy cập vào kho lưu trữ Công cụ cho nhà phát triển dành cho các tác nhân trên GitHub.

Mạng: Chỉnh sửa và gửi lại yêu cầu, tải trước thông tin chi tiết và giải mã tải trọng nhị phân

• Gửi lại các yêu cầu tìm nạp và XHR: Mục "Phát lại XHR" trước đây trong trình đơn theo bối cảnh hiện là Gửi lại. Giờ đây, công cụ này hỗ trợ tất cả các yêu cầu mạng có thể tìm nạp, chuyển đổi các yêu cầu tiêu chuẩn thành lệnh gọi fetch() trong khi vẫn duy trì độ trung thực của toàn bộ quá trình phát lại cùng với XHR. Các yêu cầu cũng theo dõi và hiển thị ngữ cảnh thực thi và nguồn gốc của bảng điều khiển.
• Cột được tải trước và "Sao chép dưới dạng phần tử tải trước": Một cột Được tải trước chuyên dụng mới sẽ cho biết liệu một yêu cầu mạng có được bắt đầu bằng tính năng tải trước dự đoán hay không. Bạn cũng có thể nhấp chuột phải vào bất kỳ yêu cầu nào rồi chọn Sao chép dưới dạng phần tử tải trước để tạo thẻ <link rel="preload"> sẵn sàng thả vào HTML của bạn. Giờ đây, Early Hints được phân loại trong cột Trình khởi tạo.
• Trình xem nhị phân cho tải trọng yêu cầu: Thẻ Tải trọng hiện có các lựa chọn về phương thức giải mã (Base64, Hex và UTF-8) cho tải trọng yêu cầu nhị phân và được nén, phản ánh thẻ Phản hồi.
• Cột Số yêu cầu được ghim: Cột Yêu cầu # hiện được ghim vào vị trí đầu tiên trong Lưới dữ liệu mạng để dễ dàng tham chiếu yêu cầu hơn.
• Lọc máy chủ lưu trữ cùng trang web: Giờ đây, việc tìm kiếm các miền, tên máy chủ hoặc cổng (ví dụ: localhost hoặc example.com) trong thanh bộ lọc Mạng sẽ lọc chính xác các yêu cầu cùng trang web.
• Giải mã tham số truy vấn mặc định: Các tham số truy vấn và biểu mẫu trong thẻ Tải trọng hiện được giải mã tự động cho tất cả các yêu cầu.

Các vấn đề về Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Phần tử: Tiện ích trang trí phần tử tuỳ chỉnh, các lượt tương tác của bộ chọn mẹ CSS được lồng và lựa chọn phần tử giả $0

Việc kiểm tra và tạo các thành phần web cũng như CSS hiện đại sẽ diễn ra nhanh chóng và trực quan hơn trong bảng điều khiển Phần tử:

• Huy hiệu trang trí phần tử tuỳ chỉnh: Các phần tử HTML tuỳ chỉnh (được xác định bằng thẻ có dấu gạch ngang hoặc thuộc tính is="..." cho các phần tử tích hợp tuỳ chỉnh) hiện hiển thị huy hiệu trang trí custom-element trong phác thảo cây DOM.
• Tương tác và mức độ cụ thể của bộ chọn mẹ CSS được lồng: Giờ đây, khi di chuột qua bộ chọn mẹ trong các quy tắc CSS được lồng và các quy tắc được lồng kế thừa, các phần tử khớp sẽ được làm nổi bật trên trang và phản hồi hoạt động lọc của thẻ Styles (Kiểu). Thêm chú giải công cụ cụ thể cho các quy tắc @nested-declarations.
• Lựa chọn phần tử giả thông qua $0: Việc chọn các phần tử giả như ::before hoặc ::after trong cây DOM của phần tử hiện liên kết trực tiếp các phần tử này với biến $0 của bảng điều khiển để kiểm tra JavaScript ngay lập tức.
• Tính năng tự động hoàn thành cho các loại text-wrap và <image>: Giờ đây, ngăn Kiểu sẽ đề xuất tất cả các giá trị từ khoá cho text-wrap (wrap, nowrap, balance, pretty, stable) và tự động hoàn thành các thuộc tính CSS chấp nhận kiểu dữ liệu <image>.
• Nhận biết thanh cuộn của Mô hình hộp: Giờ đây, sơ đồ chỉ số Mô hình hộp sẽ tính toán và hiển thị chính xác kích thước hộp nội dung khi các phần tử có thanh cuộn hiển thị.

Các vấn đề về Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Hiệu suất: Các chỉ số điều hướng mềm trong Chỉ số trực tiếp và chế độ đặt sẵn ảnh chụp màn hình tuỳ chỉnh

• Hỗ trợ Chỉ số trực tiếp cho thao tác điều hướng mềm: Chế độ xem Chỉ số trực tiếp hiện ghi lại và báo cáo Core Web Vitals (chẳng hạn như LCP và INP) cho các thao tác điều hướng mềm phía máy khách trong các ứng dụng một trang theo mặc định, dựa trên bản nâng cấp lên web-vitals phiên bản 6.0.0.
• Các chế độ cài đặt sẵn tuỳ chỉnh để chụp ảnh màn hình: Đã hiển thị các chế độ cài đặt sẵn có thể định cấu hình về số lượng và kích thước khung hình ảnh màn hình để theo dõi CDP trong bảng điều khiển Hiệu suất nhằm tuỳ chỉnh độ trung thực của bản ghi hình ảnh trong phạm vi ngân sách bộ nhớ.
• console.profileEnd() trace revealer (trình hiển thị dấu vết): Việc gọi console.profileEnd() trong mã hoặc bảng điều khiển của bạn hiện sẽ tự động mở và hiển thị dấu vết đã ghi trong bảng điều khiển Hiệu suất.
• Tóm tắt về các dấu vết tuỳ chỉnh của Extensibility API: Giờ đây, các bản tóm tắt dấu vết hiệu suất sẽ xử lý và trình bày các nhóm dấu vết tuỳ chỉnh được đăng ký bằng Extensibility API.

Các vấn đề về Chromium: 514721939, 490140054, 536954453, 535506117

Bảng điều khiển: Xuất bảng dưới dạng Markdown hoặc CSV và bảo vệ tác dụng phụ

• Sao chép bảng điều khiển dưới dạng Markdown hoặc CSV: Giờ đây, bạn có thể sao chép trực tiếp các bảng được ghi nhật ký bằng console.table() vào bảng nhớ tạm dưới dạng bảng Markdown được định dạng hoặc dữ liệu CSV từ trình đơn theo bối cảnh.
• Bảo vệ đánh giá tác dụng phụ: Giờ đây, tính năng đánh giá khi di chuột của trình gỡ lỗi sẽ bảo vệ chống lại các biểu thức chứa new, các giá trị cố định mẫu được gắn thẻ, import() động và các toán tử delete, ngăn chặn các đột biến trạng thái ngẫu nhiên trong khi tạm dừng.

Vấn đề về Chromium: 40924951, 40133606

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

Một số điểm cải tiến đáng chú ý trên các hệ thống con khác của Công cụ cho nhà phát triển:

• Nguồn: Tính năng Mở nhanh hiện ưu tiên các tệp trong không gian làm việc cục bộ với mức tăng điểm số lớn, giúp các tệp trong không gian làm việc xuất hiện ở trên cùng so với các tài nguyên mạng. (Vấn đề về Chromium: 40260136)
• Bộ nhớ: Chế độ xem Tóm tắt thông tin nhanh về heap hiện hiển thị tổng số đối tượng cùng với kích thước nông tổng hợp cho các loại đã chọn và bao gồm các bộ lọc ngữ cảnh thực thi gốc. (Vấn đề về Chromium: 497855658)
• Ứng dụng: Bảng Quảng cáo đã di chuyển nút bật/tắt Quảng cáo làm nổi bật ngay vào bảng, thêm mã nhận dạng phần tử iframe Quảng cáo có thể nhấp để hiển thị các khung trong hệ phân cấp và giới thiệu bảng phân tích chỉ số theo từng khung hình. (Vấn đề về Chromium: 514957134)
• Ứng dụng: Thiết kế lại mục Xoá dữ liệu trang web trong ngăn Lưu trữ thành một nhóm hợp nhất, tập trung (vấn đề trên Chromium: 375867286) và giải quyết các mục nhập trùng lặp của Bộ nhớ đệm sau khi khôi phục Bộ nhớ đệm cho thao tác tiến/lùi (vấn đề trên Chromium: 484693244).
• Tiện ích: Các phương thức không đồng bộ trên chrome.devtools.panels hiện trả về JavaScript Promises một cách tự nhiên khi được gọi mà không có lệnh gọi lại. (Vấn đề về Chromium: 496604551)
• Cài đặt: Chia các chế độ cài đặt trước mặc định về hạn chế băng thông mạng và cấu hình điều tiết tuỳ chỉnh thành các phần riêng biệt. (Vấn đề về Chromium: 342409451)
• Lighthouse: Cập nhật mô-đun Lighthouse đi kèm lên phiên bản 13.4.1. (Vấn đề về Chromium: 40543651)
• Vấn đề: DevTools đưa ra cảnh báo khi một hình ảnh sử dụng loading="lazy" thiếu kích thước width hoặc height rõ ràng.
• Chế độ thiết bị: Đơn giản hoá trình đơn mức thu phóng bằng lựa chọn Fit to window (Điều chỉnh cho vừa cửa sổ) hợp nhất và tắt nút bật/tắt Show device frame (Hiện khung thiết bị) khi không có đồ hoạ khung.

Cải thiện khả năng hỗ trợ tiếp cận

Chrome 152 có các điểm cải tiến sau đây về khả năng hỗ trợ tiếp cận:

• Phần tử và khả năng hỗ trợ tiếp cận: Thêm các lựa chọn trong trình đơn theo bối cảnh để chuyển đổi liền mạch giữa cây DOM của phần tử và Chế độ xem dạng cây hỗ trợ tiếp cận, cộng với "Cuộn vào chế độ xem" cho các nút hỗ trợ tiếp cận. (Vấn đề về Chromium: 417929842)
• Hỗ trợ tiếp cận: Thêm tính năng hỗ trợ sao chép các nút và cây con hỗ trợ tiếp cận dưới dạng văn bản thuần tuý bằng trình đơn theo bối cảnh. (Vấn đề về Chromium: 417929842)
• Phần tử: Đã sửa màu làm nổi bật cụm từ tìm kiếm có độ tương phản thấp trong bảng điều khiển Phần tử khi chạy ở chế độ tối. (Vấn đề về Chromium: 491718898)
• Điều hướng: Việc tách Công cụ cho nhà phát triển thành một cửa sổ riêng hoặc gắn lại vào thẻ sẽ không còn buộc tiêu điểm vào nút trình đơn chính nữa.
• Cài đặt: Đã thêm ngữ cảnh mô tả hỗ trợ tiếp cận cho các nút "Hiện thêm" và "Hiện ít hơn" trong phần cài đặt AI.