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

Sofia Emelianova

Bảng điều khiển về quyền riêng tư và bảo mật

Bảng Bảo mật cũ đã được nâng cấp thành bảng Quyền riêng tư và bảo mật, đồng thời có một phần mới dành riêng cho quyền riêng tư. Trong phần này, bạn có thể:

• Trong khi Công cụ cho nhà phát triển đang mở, hãy tạm thời hạn chế cookie của bên thứ ba có hoặc không có ngoại lệ và kiểm thử cách hoạt động của một trang web.
• Xem bảng có thông tin về cookie của bên thứ ba, bao gồm cả việc cookie đó có bị chặn hay được miễn trừ theo chế độ giới hạn tạm thời hay không, cũng như loại cookie có thể bị ảnh hưởng.

Vấn đề về Chromium: 352364594.

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.

Chế độ điều tiết CPU đặt sẵn đã hiệu chỉnh

Giờ đây, bạn có thể tự động hiệu chỉnh và nhận thêm 2 chế độ đặt sẵn điều tiết CPU để mô phỏng chính xác hơn các thiết bị di động cấp thấp và trung bình.

Trong trình đơn thả xuống Hiệu suất > Điều tiết CPU, hãy chọn Hiệu chỉnh..., sau đó trong phần Cài đặt, hãy nhấp vào Hiệu chỉnh, Tiếp tục và đợi DevTools tính toán tốc độ giảm hiệu suất cho thiết bị của bạn. Bạn có thể tìm thấy các lựa chọn điều tiết đã hiệu chỉnh trong trình đơn thả xuống Performance (Hiệu suất) > CPU throttling (Điều tiết CPU).

Chọn các sự kiện hiệu suất khác nhau trong cùng một cuộc trò chuyện với AI

Giờ đây, bảng điều khiển Trợ lý AI cho phép bạn thay đổi sự kiện đã chọn trong dấu vết hiệu suất trong cùng một cuộc trò chuyện. Nói cách khác, bạn không cần bắt đầu một cuộc trò chuyện mới để nói về một sự kiện khác.

Làm nổi bật bên thứ nhất và bên thứ ba trong mục Hiệu suất

Bảng điều khiển Hiệu suất có một bảng mới trong thẻ Tóm tắt, giúp bạn phân biệt dữ liệu của bên thứ nhất, bên thứ ba và dữ liệu từ tiện ích.

Di chuột qua các mục trong bảng để xem các sự kiện có liên quan được làm nổi bật trong dấu vết hiệu suất. Chọn Làm mờ bên thứ ba để chỉ tập trung vào dữ liệu của bên thứ nhất.

Ngoài ra, hãy nhấp vào biểu tượng account_tree bên cạnh một mục được đánh dấu trong bảng để chuyển đến thẻ Từ dưới lên được nhóm theo bên thứ ba.

Dữ liệu thực địa trong chú giải và thông tin chi tiết của công cụ đánh dấu

Nếu đã bật dữ liệu trường, thì giờ đây, bạn có thể xem dữ liệu đó trong chú giải công cụ của điểm đánh dấu chỉ số và thẻ Thông tin chi tiết.

Vấn đề về Chromium: 368135130.

Thông tin chi tiết về "Buộc chỉnh lại luồng"

Thẻ Hiệu suất > Thông tin chi tiết có thêm một thông tin chi tiết mới: Tái tạo bố cục bắt buộc. Luồng lại bắt buộc xảy ra khi công cụ kết xuất tạm dừng thực thi tập lệnh để tính toán kiểu và bố cục. Việc bố cục lại bắt buộc có thể là điểm tắc nghẽn mà bạn nên tránh.

Khi bạn di chuột lên thông tin chi tiết mới, thông tin này sẽ làm nổi bật lệnh gọi hàm hàng đầu với một luồng tái kết hợp bắt buộc, dấu vết ngăn xếp và cho biết tổng thời gian tái kết hợp.

Vấn đề về Chromium: 369766156.

Thông tin chi tiết "Tối ưu hoá kích thước DOM"

Một thông tin chi tiết mới khác là Tối ưu hoá kích thước DOM. Cây DOM lớn có thể làm giảm hiệu suất trang của bạn.

Thông tin chi tiết này làm nổi bật các quy trình trình bày lại bố cục dài và các phép tính lại về kiểu bị ảnh hưởng bởi kích thước DOM lớn trong dấu vết hiệu suất, đồng thời cung cấp số liệu thống kê về tổng số phần tử, độ sâu và số lượng phần tử con nhiều nhất.

Mở rộng dấu vết hiệu suất bằng console.timeStamp

API Khả năng mở rộng hiện hỗ trợ console.timeStamp. Ngoài performance.measure và performance.mark, giờ đây, bạn có thể tạo các dấu vết tuỳ chỉnh trong dấu vết hiệu suất và ghi lại các dấu tuỳ chỉnh bằng cách sử dụng console.timeStamp, dưới dạng giải pháp thay thế nhẹ hơn, không thêm các mục vào dòng thời gian hiệu suất nội bộ của trình duyệt mà chỉ hiển thị chúng trong dấu vết hiệu suất.

Ví dụ: bạn có thể sử dụng cú pháp sau:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Với Chế độ cài đặt chụp > check_box Hiện các kênh tuỳ chỉnh, bạn sẽ thấy kênh tuỳ chỉnh trong dấu vết:

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ử.

Giá trị theo thời gian thực của các kiểu có hiệu ứng chuyển động

Thẻ Elements (Phần tử) > Styles (Kiểu) hiện cập nhật các giá trị của kiểu động theo thời gian thực.

Hỗ trợ cho lớp giả :open và nhiều phần tử giả

Giờ đây, bảng điều khiển Elements (Phần tử) hỗ trợ giả lớp :open trong phần Styles (Kiểu) > :hov > Force specific element state (Buộc trạng thái phần tử cụ thể) cho một số phần tử HTML như <details>, <select>, <dialog> và <input>.

Ngoài ra, bảng Elements (Phần tử) hiện cũng hỗ trợ một số phần tử giả mới: ::checkmark, ::picker-icon và các phần tử giả liên quan đến băng chuyền ::column, ::scroll-button, ::scroll-marker và ::scroll-marker-group.

Vấn đề về Chromium: 383157184, 379805728.

Sao chép tất cả thông báo trên bảng điều khiển

Giờ đây, bạn có thể nhấp chuột phải để sao chép tất cả thông báo trên bảng điều khiển cùng một lúc.

Ngoài ra, bạn có thể tìm thấy một lựa chọn sao chép tương tự trong trình đơn theo bối cảnh của Network (Mạng) > Request Payload (Tải trọng yêu cầu).

Các vấn đề về Chromium: 40206460, 384967020.

Đơn vị byte trong bảng điều khiển Bộ nhớ

Giờ đây, bảng điều khiển Bộ nhớ sẽ hiển thị kích thước bằng các đơn vị byte phù hợp thay vì số lượng lớn byte.

Vấn đề về Chromium: 388589515.

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:

• Hiệu suất:
  • Chú thích: Giờ đây, bạn có thể nhấp vào nhãn để chọn mục tương ứng (crbug.com/388224764).
  • Thông tin chi tiết: Khi bạn nhấp vào CLS trong thẻ Thông tin chi tiết, hệ thống sẽ chọn cụm tệ nhất thay vì thay đổi tệ nhất.
• Danh sách bỏ qua: Theo mặc định, các thành phần bên trong của nút bắt đầu bằng node: hiện bị bỏ qua (crbug.com/382453615).
• Biểu thức trực tiếp: Khắc phục lỗi khiến biểu thức trực tiếp ảnh hưởng đến lệnh $_ (crbug.com/388437265).
• Phần tử > Kiểu: Giờ đây, độ dài tương đối có một cửa sổ bật lên cho biết giá trị tuyệt đối (crbug.com/40778486).
• Hỗ trợ tiếp cận: Giờ đây, tiêu đề cột sẽ thông báo nếu có thể sắp xếp.
• Giờ đây, biểu tượng thẻ nằm ở bên phải, bên cạnh tên thẻ thay vì ở bên trái.

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.
• Hãy 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 sử dụng 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.