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

Cải tiế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ần 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 đã sử dụng hoặc chưa sử dụng và các đề xuất 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 kết nối sớm với các 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 Hiệu suất > Thông tin chi tiết > Độ trễ yêu cầu tài liệu hiện cho bạn 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ó).

Lượt chuyển hướng trong phần Tóm tắt yêu cầu mạng

Bảng điều khiển Hiệu suất hiện hiển thị URL chuyển hướng trong phần 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 điều khiển 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, các sự kiện này gây ra nhiều hao tổn và nhiễu không cần thiết, đặ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 để lại ý kiến phản hồi tại crbug.com/414330508.

Ngừng sử dụng tuỳ chọn "Tắt mẫu JavaScript"

Tuỳ chọn Disable JavaScript samples (Tắt mẫu JavaScript) trong phần Performace (Hiệu suất) > Captures settings (Cài đặt bản ghi) không còn được dùng nữa và đã bị 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

Bảng điều khiển Cảm biến hiện cho phép bạn thiết lập độ chính xác trong quá trình 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 mang đến một số điểm cải tiến cho bảng điều khiển Elements (Thành phần).

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

Để giúp bạn gỡ lỗi các giá trị CSS phức tạp, thẻ Elements (Thành phần) > Styles (Kiểu) hiện sẽ hiển thị trong chú giải công cụ khi bạn di chuột:

• Chuỗi định nghĩa đầy đủ của các biến CSS để bạn không cần phải nhấp vào nhiều đường liên kết.
• Đánh giá từng bước các phép tính CSS phức tạp để 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ú giải công cụ hiển thị các chuỗi định nghĩa theo 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 qua các giá trị để làm nổi bật và theo dõi giá trị đã tính toán trở lại biểu thức ban đầu.

Vấn đề về Chromium: 396080529.

Hỗ trợ @function trong phần Elements (Thành phần) > Styles (Kiểu)

Để chuẩn bị cho tính năng hỗ trợ @function trong Chrome, thẻ Elements (Thành phần) > Styles (Kiểu) hiện liên kết tên hàm tuỳ chỉnh với định nghĩa của các hàm đó trong một mục chuyên biệt.

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.

has-request-header bộ lọc

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

Vấn đề về Chromium: 397481040.

Cổng giao tiếp trực tiếp trong ứng dụng web tách biệt

Trong bảng điều khiển Network (Mạng), giờ đây, bạn có thể theo dõi lưu lượng truy cập của Isolated Web Apps (IWAs) (Ứng dụng web tách biệt) 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à trong thẻ Messages (Tin nhắn), hãy chọn một tin nhắn.

Ứng dụng web tách biệt (IWA) cung cấp 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à khám phá ứ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 sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

• Application (Ứng dụng) > Storage (Bộ nhớ): Xoá tuỳ chọn Web SQL không dùng nữa (crbug.com/412707590).
• Thành phần:
  • 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 tuỳ chọn tự động hoàn thành overflow.
• Mạng: Xoá tiêu đề HTTP Referrer-Policy khỏi tuỳ 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à hướng 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ì các luồng này không chặn luồng chính (crbug.com/40248589).
• Vấn đề. Giờ đây, báo cáo:
  • Nếu có bất kỳ tài nguyên nào bị nghi ngờ theo dõi người dùng bị chặn.
  • Các biện pháp giảm thiểu hoạt động theo dõi số trang không truy cập, bất kể các biện pháp đó 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 (Thành phần) > Styles (Kiểu) hiện có thể lấy tiêu điểm bằng bàn phím:
  • Bảng màu bóng (crbug.com/401213105).
  • Đường liên kết đến tên vị trí neo (crbug.com/401213107).
  • Các nút trình chỉnh sửa Flex và lưới (crbug.com/401213522).
  • Chiều 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 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 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, 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 mọi nội dung đã được đề cập trong loạt bài viết Tính năng mới trong DevTools.