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

Sofia Emelianova

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

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

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

Các điểm cải tiến về 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 "Không bao giờ tạm dừng tại đây" cho phép bạn ngăn Trình gỡ lỗi tạm dừng nhiều lần trên cùng một dòng. Nhờ vậy, bạn có thể dễ dàng xử lý các điểm ngắt không liên quan kích hoạt liên tục. Phiên bản này nâng cao khả năng này và hiện hoạt động cho:

• Các trường hợp ngoại lệ hoặc hứa hẹn từ chối các hàm tích hợp sẵn.
• Các điểm ngắt DOM, tìm nạp/XHR và Vi phạm CSP.
• Trong quá trình tháo rời Wasm.

Xem quy trình làm việc trong thực tế:

Vấn đề về Chromium: 40924349.

Trình nghe sự kiện di chuyển nhanh mới

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

Vấn đề về Chromium: 40286359.

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

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

Đã cập nhật các giá trị đặt trước hạn chế băng thông mạng

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

Vấn đề về Chromium: 342406608.

Thông tin của trình chạy dịch vụ trong các trường tùy 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 worker dịch vụ, bao gồm cả thời gian, dưới dạng 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 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) và hiển thị chúng 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

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:

• Hỗ trợ tiếp cận: Trình đọc màn hình hiện thông báo nội dung của thông báo trong Console khi cuộn qua nhật ký bằng phím mũi tên lên và xuống (344484979).
• Nguồn:
  • Trang: Tuỳ chọn trình đơn Lưu dưới dạng hiện 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 cuộc gọi: Xoá hậu tố (async) khỏi nội dung mô tả khung cuộc gọi không đồng bộ, thay đổi nội dung đánh dấu từ nghiêng thành in đậ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ùng nhớ khối xếp (340200025).
• Mạng: Sửa lỗi ngăn không cho xem trước nội dung phản hồi truyền trực tuyến cho những yêu cầu vừa mới 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 phần 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 sang phía dưới cùng bên phải (345256274).
• Bảng điều khiển: Khắc phục lỗi hiển thị nhiều thông báo bảng điều khiển giống hệt nhau khi điều hướng bằng bộ nhớ đệm lui/tiến (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 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ác kênh xem trước này cho phép bạn sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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 phản hồi và yêu cầu tính năng cho chúng tôi tại 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 more_vert > Trợ giúp > Báo cáo sự cố trong 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 trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.