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

Sofia Emelianova

Kiểm tra tính năng định vị điểm neo CSS trong bảng điều khiển Phần tử

Để giúp bạn gỡ lỗi tính năng định vị phần tử neo dễ dàng hơn, thẻ Kiểu hiện liên kết các giá trị nhận dạng phần tử neo rõ ràng và phần tử neo ngầm định với các nút của chúng.

Ngoài ra, giá trị thuộc tính popovertarget hiện liên kết với phần tử popover trong DOM.

Cải tiến bảng điều khiển Nguồn

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Sources (Nguồn).

Tính năng "Không bao giờ tạm dừng ở đây" nâng cao

Tuỳ chọn "Never Pause Here" (Không bao giờ tạm dừng ở đây) giúp bạn ngăn Debugger tạm dừng trên cùng một dòng nhiều lần. Điều này giúp bạn dễ dàng xử lý các điểm ngắt không liên quan được kích hoạt nhiều lần. Phiên bản này nâng cao khả năng này và hiện hoạt động cho:

• Ngoại lệ hoặc lời hứa bị từ chối từ các hàm tích hợp.
• "Huỷ" điểm ngắt DOM, điểm ngắt tìm nạp/XHR và điểm ngắt vi phạm CSP.
• Trong quá trình tháo rời Wasm.

Xem quy trình công việc trong thực tế:

Vấn đề về Chromium: 40924349.

Trình nghe sự kiện mới cho tính năng chụp cuộn

Danh sách Sources (Nguồn) > Event Listener Breakpoints (Điểm ngắt trình nghe sự kiện) > Control (Kiểm soát) có 2 trình nghe liên quan đến scroll-snap: scrollsnapchange và scrollsnapchanging. Những sự kiện này sẽ kích hoạt khi bạn cuộn vùng chứa cuộn theo cách khiến vùng chứa đó chuyển nhanh đến một phần tử mới.

Vấn đề về Chromium: 40286359.

Cải tiến bảng điều khiển Mạng

Phiên bản này có một số điểm cải tiến đối với bảng điều khiển Mạng.

Đã cập nhật chế độ hạn chế băng thông mạng đặt sẵn

Bảng điều khiển Mạng được cập nhật các chế độ cài đặt sẵn về điều tiết: Mạng 4G nhanh mới, Mạng 3G nhanh được đổi tên thành Mạng 4G chậm và Mạng 3G chậm được đổi tên thành Mạng 3G. Điều này phù hợp hơn với các chế độ đặt sẵn của Lighthouse.

Vấn đề về Chromium: 342406608.

Thông tin về worker dịch vụ trong các trường tuỳ chỉnh của định dạng HAR

Khi xuất nhật ký mạng sang định dạng HAR, giờ đây, bạn có thể xem thông tin liên quan đến các worker dịch vụ, bao gồm cả thời gian, dưới dạng các trường tuỳ chỉnh (có tiền tố là dấu gạch dưới). Ví dụ: bạn có thể thấy các trường mới sau đây trong nhật ký:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Vấn đề về Chromium: 342406608.

Gửi và nhận các sự kiện WebSocket trong bảng điều khiển Hiệu suất

Tương tự như các sự kiện WebSocket khác, bảng điều khiển Performance (Hiệu suất) hiện ghi lại các sự kiện Send WebSocket Message (Gửi thông báo WebSocket) và Receive WebSocket Message (Nhận thông báo WebSocket) rồi hiển thị các sự kiện đó trong dấu vết hiệu suất. Ví dụ:

Vấn đề về Chromium: 40286129.

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

Sau đây là một số điểm cải tiến và bản sửa lỗi đáng chú ý trong bản phát hành này:

• Hỗ trợ tiếp cận: Giờ đây, trình đọc màn hình sẽ thông báo nội dung của các thông báo trong Bảng điều khiển khi bạn di chuyển qua nhật ký bằng các phím mũi tên lên và xuống (344484979).
• Nguồn:
  • Trang: Giờ đây, lựa chọn Lưu dưới dạng trong trình đơn sẽ lưu các tệp mô-đun Wasm dưới dạng tệp nhị phân wasm hợp lệ thay vì văn bản Base64 (40784130).
  • Ngăn xếp lệnh gọi: Xoá hậu tố (async) khỏi nội dung mô tả khung lệnh gọi không đồng bộ, thay đổi điểm đánh dấu của nội dung mô tả từ chữ nghiêng thành chữ đậm (343750870).
• Bộ nhớ: Xoá InternalNodes có kích thước bằng 0 không cần thiết khỏi Tóm tắt ảnh chụp nhanh về heap (340200025).
• Mạng: Khắc phục một lỗi khiến bạn không xem trước được nội dung phản hồi truyền trực tuyến cho những yêu cầu vừa bắt đầu nhưng chưa nhận được sự kiện responseReceived (338340752).
• Hiệu suất:
  • Số liệu thống kê về bộ chọn: Đã thêm chú thích giải thích cho cột %-of-Slow-Path-Non-Matches (324282954).
  • Chế độ định cấu hình kênh: Nút Kết thúc việc định cấu hình kênh đã được chuyển xuống phía dưới cùng bên phải (345256274).
• Bảng điều khiển: Khắc phục một lỗi khiến nhiều thông báo giống hệt nhau xuất hiện trên bảng điều khiển khi điều hướng bằng bộ nhớ đệm trước/sau (40894153).
• Cài đặt: Thêm biểu tượng trợ giúp bên cạnh tất cả các thẻ.

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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" 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 bài Tính năng mới trong Công cụ cho nhà phát triển.