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 định vị neo dễ dàng hơn, thẻ Kiểu hiện liên kết giá trị nhận dạng neo rõ ràng và 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 Nguồn.

Cải thiện tính năng "Không bao giờ tạm dừng tại đây"

Tuỳ chọn "Never Pause Here" (Không bao giờ tạm dừng tại đây) giú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. Đ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 cải thiện khả năng này và hiện hoạt động cho:

• Ngoại lệ hoặc từ chối lời hứa từ các hàm tích hợp sẵn.
• "Huỷ" điểm ngắt DOM, tìm nạp/XHR và Vi phạm CSP.
• Trong phần tháo gỡ Wasm.

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

Vấn đề về Chromium: 40924349.

Trình nghe sự kiện cố định vị trí cuộn mới

Danh sách Sources (Nguồn) > Event Listener Breakpoints (Điểm ngắt trình nghe sự kiện) > Control (Điều khiển) có hai trình nghe liên quan đến scroll-snap (cố định vị trí cuộn): scrollsnapchange và scrollsnapchanging. Các 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 vùng chứa đó bám vào 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 mang đến một số điểm cải tiến cho bảng điều khiển Network (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ác giá trị đặt trước điều tiết mới: 4G nhanh mới, 3G nhanh được đổi tên thành 4G chậm và 3G chậm được đổi tên thành 3G. Điề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 về trình chạy dịch vụ trong các trường tuỳ chỉnh của định dạng HAR

Giờ đây, khi xuất nhật ký mạng sang định dạng HAR, bạn có thể xem thông tin liên quan đến trình chạy 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 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 Hiệu suất hiện ghi lại các sự kiện Gửi thông báo WebSocket và 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 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 di chuyể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 trong 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 lệnh gọi: Đã xóa hậu tố (async) khỏi nội dung mô tả khung lệnh gọi không đồng bộ, thay đổi kiểu đánh dấu từ in nghiêng thành in đậm (343750870).
• Bộ nhớ: Đã xóa InternalNodes có kích thước bằng 0 không cần thiết khỏi Tóm tắt snapshot của vùng nhớ heap (340200025).
• Mạng: Khắc phục lỗi ngăn bản xem trước nội dung phản hồi trực tuyến cho các 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 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 giống hệt nhau trên bảng điều khiển khi di chuyển bằng bộ nhớ đệm cho thao tác tiến/lùi (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 sử dụng 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à 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 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, bản 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 vấn đề về Công cụ cho nhà phát triển bằng cách nhấp vào biểu tượng more_vert Tuỳ chọn khác > 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.
• Đăng tweet cho @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong video trên YouTube về Công cụ cho nhà phát triển hoặc Mẹo về Công cụ cho nhà phát triển trong 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 bài Tính năng mới trong Công cụ cho nhà phát triển.