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 ẩn 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 đến phần tử popover 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).

Cải tiến chế độ "Không bao giờ tạm dừng ở đây"

Tuỳ chọn "Never Pause Here" (Không bao giờ tạm dừng tại đây) cho phép bạn ngăn Trình gỡ lỗi liên tục tạm dừng ở 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 nâng cao khả năng này và hiện hoạt động cho:

• Các ngoại lệ hoặc trường hợp từ chối lời hứa từ các hàm tích hợp.
• "Huỷ" đ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 cuộn chụp nhanh mới

Danh sách Sources (Nguồn) > Event Listener Breakpoints (Điểm ngắt trình nghe sự kiện) > Control (Kiểm soát) nhận được hai trình nghe liên quan đến scroll-snap: scrollsnapchange và scrollsnapchanging. Các 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 này chụp 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 mang đến một số điểm cải tiến cho bảng điều khiển Mạng.

Cập nhật các chế độ cài đặt trước về tính năng 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 đượ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 chế độ cài đặt trước của Lighthouse.

Vấn đề về Chromium: 342406608.

Thông tin về worker 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 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 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 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 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 các 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 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 phần đánh dấu từ in 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: 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ú giải công cụ 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ả 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 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 ý 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.
• Gửi tweet đến @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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.