Tính năng mới trong DevTools, Chrome 138

Cải thiện bảng điều khiển Hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Điểm gốc được kết nối trước trong thông tin chi tiết "Cây phần phụ thuộc mạng"

Thông tin chi tiết Hiệu suất > Thông tin chi tiết > Cây phụ thuộc mạng hiện cho bạn thấy danh sách các nguồn gốc được kết nối trước và các nguồn gốc có thể kết nối trước (nếu có).

Gợi ý kết nối trước cho phép trang web của bạn thiết lập các kết nối sớm tới những nguồn gốc quan trọng của bên thứ ba và cải thiện tốc độ tải trang.

Để biết thêm thông tin, hãy xem phần Kết nối trước với những nguồn gốc bắt buộc.

Thời gian phản hồi và chuyển hướng của máy chủ trong thông tin chi tiết "Độ trễ khi yêu cầu tài liệu"

Thông tin chi tiết về Hiệu suất > Thông tin chi tiết > Độ trễ yêu cầu tài liệu hiện cho biết thời gian phản hồi của máy chủ và số lượng hoặc thời gian chuyển hướng (nếu có).

Các lệnh chuyển hướng trong phần Tóm tắt yêu cầu mạng

Giờ đây, bảng điều khiển Performance (Hiệu suất) sẽ cho thấy các URL chuyển hướng trong phần Summary (Tóm tắt) của các yêu cầu mạng và trong chú giải công cụ của các yêu cầu đó.

Vấn đề về Chromium: 402353313.

Giảm nhiễu trong dấu vết hiệu suất

Giờ đây, bảng Hiệu suất sẽ không hiển thị các sự kiện thuộc danh mục compile của công cụ JavaScript v8. Trước đây, những sự kiện này gây ra nhiều chi phí không cần thiết và nhiễu, đặc biệt là sự kiện compile code.

Nếu bạn nhận thấy một số sự kiện quan trọng đối với bạn hiện không còn xuất hiện, vui lòng gửi ý kiến phản hồi của bạn tại crbug.com/414330508.

Không dùng nữa tuỳ chọn "Tắt mẫu JavaScript"

Lựa chọn Tắt mẫu JavaScript trong Hiệu suất > Cài đặt chụp đã bị ngừng sử dụng và xoá do ít hữu ích và ít được sử dụng.

Vấn đề về Chromium: 414734883.

Tham số độ chính xác của vị trí địa lý trong Cảm biến

Giờ đây, bảng điều khiển Cảm biến cho phép bạn đặt độ chính xác trong tính năng mô phỏng vị trí địa lý. Bằng cách này, bạn có thể kiểm thử việc xử lý các mức độ chính xác khác nhau của GPS.

Vấn đề về Chromium: 40074843.

Cải tiến bảng điều khiển Phần tử

Phiên bản này có một số điểm cải tiến đối với bảng Phần tử.

Gỡ lỗi các giá trị CSS phức tạp dễ dàng hơn

Để giúp bạn gỡ lỗi các giá trị CSS phức tạp, thẻ Phần tử > Kiểu hiện sẽ cho bạn biết trong một chú giải công cụ khi di chuột:

• Chuỗi định nghĩa đầy đủ của các biến CSS, để bạn không cần nhấp vào nhiều đường liên kết.
• Quy trình đánh giá từng bước các phép tính CSS phức tạp, nhờ đó bạn có thể xác định lỗi hiệu quả hơn và hiểu rõ hơn về cách tính toán một giá trị.

Chú thích này cho thấy các chuỗi định nghĩa trên nhiều dòng, mỗi dòng cho một định nghĩa. Bạn có thể mở rộng các phép tính phức tạp và di chuột lên các giá trị để làm nổi bật và truy tìm giá trị được tính toán trở lại biểu thức ban đầu.

Vấn đề về Chromium: 396080529.

@function hỗ trợ trong Elements > Styles (Phần tử > Kiểu)

Để chuẩn bị cho việc hỗ trợ @function trong Chrome, thẻ Elements (Phần tử) > Styles (Kiểu) hiện liên kết tên hàm tuỳ chỉnh của bạn với định nghĩa của chúng trong một phần riêng.

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.

has-request-header bộ lọc

Giờ đây, bảng điều khiển Mạng hỗ trợ bộ lọc has-request-header cho phép bạn lọc theo một tên tiêu đề yêu cầu cụ thể.

Vấn đề về Chromium: 397481040.

Direct Sockets trong Ứng dụng web tách biệt

Trong bảng điều khiển Mạng, giờ đây, bạn có thể theo dõi lưu lượng truy cập của Ứng dụng web riêng biệt (IWA) thông qua TCPSocket, UDPSocket (ở chế độ liên kết), UDPSocket (ở chế độ kết nối).

Để làm việc này, hãy chọn một kết nối directscoket bên cạnh các yêu cầu thông thường trong bảng và chọn một thông báo trong thẻ Messages (Thông báo).

Ứng dụng web tách biệt (IWA) cung cấp một mô hình bảo mật có độ tin cậy cao cho các ứng dụng web. Để biết thêm thông tin, hãy xem bài viết Bắt đầu sử dụng Ứng dụng web tách biệt và xem ứng dụng minh hoạ triển khai Direct Sockets API.

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:

• Ứng dụng > Bộ nhớ: Xoá lựa chọn Web SQL không dùng nữa (crbug.com/412707590).
• Phần tử:
  • Theo mặc định, tính năng làm nổi bật các vấn đề về phần tử và thuộc tính trong DOM được bật.
  • Kiểu: Đã thêm giá trị clip vào các lựa chọn tự động hoàn thành overflow.
• Mạng: Xoá tiêu đề HTTP Referrer-Policy khỏi lựa chọn Sao chép dưới dạng tìm nạp vì đây là tiêu đề phản hồi để kiểm soát hành vi của trình duyệt, chứ không phải là chỉ dẫn phía máy khách (crbug.com/413904896).
• Hiệu suất: Xoá cảnh báo "tác vụ dài" khỏi các luồng worker vì chúng không chặn luồng chính (crbug.com/40248589).
• Vấn đề. Báo cáo hiện tại:
  • Nếu có tài nguyên nào bị chặn do bị nghi ngờ theo dõi người dùng.
  • Các biện pháp giảm hoạt động theo dõi số trang không truy cập, bất kể chúng có truy cập vào bộ nhớ trong quá trình chuyển hướng hay không.
• Hỗ trợ tiếp cận. Các phần tử sau trong Elements (Phần tử) > Styles (Kiểu) hiện có thể lấy tiêu điểm bằng bàn phím:
  • Mẫu bóng đổ (crbug.com/401213105).
  • Đường liên kết đến tên vị trí điểm neo (crbug.com/401213107).
  • Các nút trình chỉnh sửa lưới và linh hoạt (crbug.com/401213522).
  • Độ dài (crbug.com/401211976).
  • Đường liên kết URL (crbug.com/401213104).
  • Tên và giá trị thuộc tính (crbug.com/417458979).

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.