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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Bảng điều khiển Bảo mật cũ đã phát triển thành bảng điều khiển Quyền riêng tư và bảo mật và 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ể:

  • 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 tra 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ế độ giới hạn tạm thời chặn hay được miễn trừ hay không, cũng như loại cookie có thể bị ảnh hưởng.

Trước và sau khi thêm mục Quyền riêng tư vào bảng điều khiển Bảo mật.

Vấn đề về Chromium: 352364594.

Các điểm cải tiến về 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 hai chế độ đặt trước điều tiết CPU để ước chừ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 Performance (Hiệu suất) > CPU throttling (Điều tiết CPU), hãy chọn Calibrate... (Điều chỉnh), sau đó trong phần Settings (Cài đặt), hãy nhấp vào Calibrate (Điều chỉnh), Continue (Tiếp tục) và đợi DevTools tính toán tốc độ chậm lại cho thiết bị của bạn. Bạn có thể tìm thấy các tuỳ chọn điều tiết được hiệu chỉnh trong trình đơn thả xuống Hiệu suất > Điều tiết CPU.

Trước và sau khi thêm tính năng hiệu chỉnh điều tiết.

Chọn nhiều sự kiện hiệu suất 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 phải bắt đầu cuộc trò chuyện mới để nói về một sự kiện khác.

Thông tin làm nổi bật của bên thứ nhất và bên thứ ba trong thẻ Hiệu suất

Bảng điều khiển Hiệu suất sẽ có một bảng mới trong thẻ Tóm tắt, cho phép bạn phân biệt giữa dữ liệu của bên thứ nhất, bên thứ ba và dữ liệu của 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. Đánh dấu vào 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 bên cạnh mục được làm nổi bật trong bảng để chuyển đến thẻ Từ dưới lên được nhóm theo bên thứ ba.

Dữ liệu trường trong chú giải công cụ và thông tin chi tiết về điểm đánh dấu

Nếu đã bật dữ liệu trường, giờ đây, bạn có thể thấy 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.

Trước và sau khi thêm dữ liệu đã lưu vào chú giải công cụ của điểm đánh dấu và thẻ Thông tin chi tiết.

Vấn đề về Chromium: 368135130.

Thông tin chi tiết về "Buộc điều 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: Buộc luồng lại. Buộc luồng lại 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. Bạn nên tránh tình trạng buộc phải chảy lại.

Khi bạn di chuột qua 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 có luồng dữ liệu buộc phải chảy lại, dấu vết ngăn xếp và hiển thị tổng thời gian luồng dữ liệu buộc phải chảy lại.

Trước và sau khi thêm thông tin chi tiết "Buộc luồng lại".

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 chậm hiệu suất trang.

Thông tin chi tiết này nêu bật các lần trình bày lại bố cục và tính toán lại kiểu dài 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ử, chiều sâu và hầu hết các phần tử con.

Trước và sau khi thêm thông tin chi tiết "Tối ưu hoá kích thước DOM".

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

Extensibility API hiện hỗ trợconsole.timeStamp. Ngoài performance.measure và performance.mark, giờ đây, bạn có thể tạo kênh tuỳ chỉnh trong dấu vết hiệu suất và ghi lại các điểm đánh dấu tuỳ chỉnh bằng console.timeStamp. Đây là một giải pháp thay thế nhẹ hơn không thêm các mục vào tiến trình hiệu suất nội bộ của trình duyệt mà chỉ hiển thị các mục đó 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 Capture settings (Cài đặt bản ghi) > Show custom tracks (Hiện kênh tuỳ chỉnh), bạn sẽ thấy kênh tuỳ chỉnh trong dấu vết:

Trước và sau khi thêm tính năng hỗ trợ console.timeStamp.

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

Giá trị theo thời gian thực của các kiểu ảnh động

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

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

Bảng điều khiển Elements (Phần tử) hiện hỗ trợ lớp giả :open trong mục 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ất định như <details>, <select>, <dialog> và <input>.

Trước và sau khi thêm tuỳ chọn &quot;:open&quot;.

Ngoài ra, bảng điều khiển Elements (Thành phần) hiện cũng hỗ trợ một số phần tử giả mới: ::checkmark, ::picker-icon và 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 của 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 của bảng điều khiển cùng một lúc.

Trước và sau khi thêm tuỳ chọn &quot;Sao chép bảng điều khiển&quot;.

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

Vấn đề về Chromium: 40206460, 384967020.

Đơn vị byte trong bảng Bộ nhớ

Bảng điều khiển Memory (Bộ nhớ) hiện hiển thị kích thước theo đơn vị byte thích hợp thay vì số lượng byte lớn.

Trước và sau khi hiển thị đơn vị byte.

Vấn đề về Chromium: 388589515.

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:

  • 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: Giờ đây, khi nhấp vào CLS trong thẻ Thông tin chi tiết, bạn 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 phần nội bộ của nút bắt đầu bằng node: sẽ 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).
  • Elements (Phần tử) > Styles (Kiểu): Độ dài tương đối hiện có một cửa sổ bật lên hiển thị 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.
  • Biểu tượng thẻ hiện 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 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.

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.