Tính năng mới trong Công cụ cho nhà phát triển, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Gỡ lỗi CSS bằng Gemini

Công cụ phát triển Chrome có bảng điều khiển trợ lý AI thử nghiệm mới, nơi bạn có thể trò chuyện với Gemini và được trợ giúp gỡ lỗi CSS.

Thử ngay bây giờ! Trong bảng điều khiển Elements (Phần tử), hãy nhấp chuột phải vào một phần tử rồi chọn Ask AI (Hỏi AI) hoặc nhấp vào nút tương ứng bên cạnh phần tử đó. Công cụ dành cho nhà phát triển sẽ mở bảng điều khiển Hỗ trợ AI mới.

Mục "Hỏi AI" trên trình đơn và nút tương ứng.

Bảng điều khiển mới sẽ nhắc bạn bật chế độ cài đặt tương ứng. Đảm bảo bạn đáp ứng Yêu cầu, bật nút bật/tắt chế độ cài đặt rồi quay lại bảng điều khiển Trợ giúp AI. Phương thức này sẽ lấy phần tử bạn đã chọn làm ngữ cảnh. Nhập câu hỏi của bạn về phần tử đó.

Bảng điều khiển trợ lý AI mới trả lời một câu lệnh.

Để tìm hiểu thêm về cách sử dụng bảng điều khiển mới một cách hiệu quả nhất, hãy xem bài viết 5 điều thú vị có thể làm với tính năng Trợ lý AI trong Công cụ cho nhà phát triển và tham khảo bài viết Trợ lý AI để tạo kiểu.

Nhóm DevTools rất mong nhận được ý kiến phản hồi của bạn. Vui lòng để lại lỗi này trong crbug.com/364805393.

Kiểm soát các tính năng AI trong một thẻ cài đặt chuyên biệt

Giờ đây, bạn có thể quản lý tất cả các tính năng AI ở cùng một nơi: thẻ mới Cài đặt > Các cải tiến về AI. Trang này liệt kê những điều cần cân nhắc quan trọng, mô tả các tính năng AI và cho phép bạn bật và tắt từng tính năng.

Thẻ mới về các phát kiến về AI.

Để biết thêm thông tin, hãy xem phần Cài đặt > Các cải tiến về AI.

Chỉ cần một lần nhấp để xem thông tin chi tiết trên Bảng điều khiển

Công cụ cho nhà phát triển không còn yêu cầu bật tính năng đồng bộ hoá chế độ cài đặt cho các tính năng AI. Vì vậy, bạn chỉ cần nhấp một lần để xem Thông tin chi tiết trên bảng điều khiển đã phát hành trước đó cùng với Tính năng hỗ trợ AI để tạo kiểu.

Nếu bạn đã đăng nhập vào Chrome, hãy bật các tính năng này trong phần Cài đặt > Công nghệ cải tiến dựa trên AI.

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.

Chú thích và chia sẻ kết quả về hiệu suất

Bảng điều khiển Hiệu suất có thẻ Ghi chú mới trong thanh bên có thể mở rộng ở bên trái, giúp đơn giản hoá quy trình tạo ghi chú để khám phá dấu vết và cộng tác khi chia sẻ kết quả tìm hiểu về hiệu suất.

Giờ đây, bạn có thể gắn nhãn và kết nối các sự kiện bằng mũi tên, đồng thời làm nổi bật các khoảng thời gian ngay trên dấu vết. Sau đó, bạn có thể lưu, chia sẻ và tải các dấu vết được chú thích trở lại bảng điều khiển Hiệu suất.

Thẻ chú thích mới trong thanh bên ở bên trái và sự kiện, phạm vi và kết nối được chú thích.

Xem thông tin chi tiết về hiệu suất ngay trong bảng điều khiển Hiệu suất

Giờ đây, bạn có thể khám phá thông tin chi tiết hữu ích trong thẻ Thông tin chi tiết mới trên thanh bên trái của bảng điều khiển Hiệu suất. Thông tin chi tiết được tổng hợp từ báo cáo Lighthouse và bảng điều khiển Thông tin chi tiết về hiệu suất sắp ngừng hoạt động.

Thẻ Thông tin chi tiết nhằm cung cấp hướng dẫn phân tích và đề xuất thông tin chi tiết hữu ích về các vấn đề về hiệu suất có thể làm chậm trang web của bạn. Để sử dụng thông tin chi tiết, hãy mở thẻ trong thanh bên trái của bảng điều khiển Hiệu suất, mở rộng các danh mục khác nhau, rồi di chuột và nhấp vào các mục. Bảng điều khiển Hiệu suất sẽ làm nổi bật các sự kiện tương ứng trong dấu vết.

Nhóm Công cụ cho nhà phát triển rất mong nhận được ý kiến phản hồi của bạn về mức độ hữu ích của thông tin chi tiết, cách cải thiện thông tin chi tiết và trải nghiệm của bạn khi sử dụng thông tin chi tiết với các công cụ khác, chẳng hạn như PageSpeed Insights và Lighthouse. Vui lòng để lại ý kiến phản hồi của bạn tại crbug.com/371170842.

Dễ dàng phát hiện các thay đổi bố cục quá mức

Bảng điều khiển Layout shifts (Thay đổi bố cục) có giao diện mới. Các thay đổi về bố cục hiện được đánh dấu bằng hình kim cương màu tím (nhìn rõ hơn) và được nhóm thành các cụm dựa trên vị trí gần nhau trên dòng thời gian. Cả ca làm việc và cụm ca làm việc đều có một bảng được sắp xếp với thời gian, điểm số, thành phần và nguyên nhân có thể gây ra lỗi trong thẻ Tóm tắt.

Hình ảnh trước và sau khi cập nhật kênh "Thay đổi bố cục" và sắp xếp lại thẻ "Tóm tắt".

Ngoài ra, chế độ xem chỉ số trực tiếp sẽ nhận được nhật ký Thay đổi bố cục cùng với điểm số và các phần tử bên cạnh thẻ Số lượt tương tác.

Trước và sau khi thêm nhật ký "Layout shifts" (Thay đổi bố cục) vào chế độ xem chỉ số trực tiếp.

Vấn đề về Chromium: 369100729.

Phát hiện ảnh động không được kết hợp

Giờ đây, kênh Ảnh động sẽ hiển thị cho bạn thông tin hữu ích về ảnh động không được kết hợp:

  • Đặt tên cho ảnh động theo thuộc tính CSS tương ứng (nếu có).
  • Đánh dấu ảnh động không được kết hợp bằng hình tam giác màu đỏ trong bản nhạc.
  • Cho bạn biết lý do không kết hợp được trong thẻ Tóm tắt.

Trước và sau khi đặt tên cho ảnh động trong bản nhạc, đánh dấu ảnh động không kết hợp và cho biết lý do không thành công.

Để biết thêm thông tin, hãy xem phần Chỉ sử dụng các thuộc tính dành cho trình kết hợp và quản lý số lớp.

Vấn đề về Chromium: 41006273.

Tính năng đồng thời phần cứng chuyển sang Cảm biến

Chế độ cài đặt Hardware concurrency (Đồng thời phần cứng) sẽ di chuyển từ bảng điều khiển Performance (Hiệu suất) sang một vị trí phù hợp hơn – bảng điều khiển Sensors (Cảm biến).

Trước và sau khi di chuyển chế độ cài đặt "Hardware concurrency" (Đồng thời phần cứng) sang bảng điều khiển Sensors (Cảm biến).

Vấn đề về Chromium: 371463665.

Bỏ qua tập lệnh ẩn danh và tập trung vào mã của bạn trong dấu vết ngăn xếp

Dấu vết ngăn xếp trong Console hiện phát hiện, bỏ qua, thu gọn và làm mờ (nếu mở rộng) các khung đến từ các tệp trong danh sách bỏ qua một cách chính xác. Trước đây, tính năng này không làm mờ tên hàm trong dấu vết mở rộng.

Bạn cũng có thể bật mới Cài đặt > Danh sách bỏ qua > Tập lệnh ẩn danh từ eval hoặc bảng điều khiển để đặt DevTools bỏ qua các tập lệnh ẩn danh không có URL nguồn.

Trước và sau khi cải thiện danh sách bỏ qua trong dấu vết ngăn xếp.

Ngoài ra, khi bạn nhấp chuột phải và Save as... (Lưu dưới dạng...) nhật ký bảng điều khiển, nhật ký này sẽ không lưu văn bản Show more/less (Hiện thêm/ít hơn).

Vấn đề về Chromium: 40279542, 40945570, 345248263.

Phần tử > Kiểu: Hỗ trợ chế độ ghi sideways-* cho lớp phủ lưới và từ khoá trên toàn CSS

Thẻ Elements (Phần tử) > Styles (Kiểu) hiện hỗ trợ những nội dung sau:

  • Lớp phủ lưới trong khung nhìn hiện hiển thị lưới cho các chế độ ghi sideways-rl và sideways-lr.
  • Giải quyết từ khoá trên toàn CSS. Về mặt thực tế, điều này có nghĩa là, ví dụ: nếu inherit là một màu, thì thẻ Styles (Kiểu) sẽ hiển thị một công cụ chọn màu bên cạnh.Trước và sau khi phân giải từ khoá trên toàn CSS.

Các vấn đề về Chromium: 40280717, 40706051, 40501131.

Kiểm tra Lighthouse cho các trang không phải HTTP ở chế độ khoảng thời gian và ảnh chụp nhanh

Giờ đây, Lighthouse có thể tạo báo cáo cho các trang không phải HTTP ở chế độ khoảng thời gian và tổng quan nhanh.

Trước và sau khi bật tính năng kiểm tra cho trang không phải HTTP ở chế độ khoảng thời gian và ảnh chụp nhanh.

Hỗ trợ tiếp cận

Phiên bản này có các điểm cải tiến về hỗ trợ tiếp cận sau:

  • Trong Sources (Nguồn) > Editor (Trình chỉnh sửa), giờ đây, bạn có thể đóng các thẻ có tệp đang mở bằng cách đặt tiêu điểm vào nút X rồi nhấn phím Enter hoặc Space.
  • Trong Performance (Hiệu suất), giờ đây, bạn có thể chọn một mục trong dấu vết và nhấn Space (Phím cách) để mở trình đơn theo bối cảnh.
  • Trong mục Hiệu suất, thẻ Thông tin chi tiết trong thanh bên ở bên trái có thể truy cập bằng bàn phím và có thể "dùng phím để di chuyển qua".

Vấn đề về Chromium: 372411090.

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:

  • Giờ đây, chế độ cài đặt điều tiết được đồng bộ hoá chính xác giữa bảng điều khiển Hiệu suất và Mạng (370332090).
  • Application (Ứng dụng) > Background services (Dịch vụ nền) > Speculative loads (Tải dự đoán) > Rules (Quy tắc) hiện có nút in đẹp {} tương tự như Sources (Nguồn) > Editor (Trình chỉnh sửa) (40279147).
  • Biểu thức trực tiếp: Giờ đây, thao tác nhấn phím Tab sau khi chọn một tuỳ chọn tự động hoàn thành sẽ thoát khỏi trường chỉnh sửa thay vì thụt lề văn bản (349939551).
  • Elements (Phần tử) > Styles (Kiểu): anchor() và anchor-size() hỗ trợ cú pháp mới, trong đó bạn có thể sắp xếp lại các đối số và bỏ qua hướng anchor-size() (343516786). Ngoài ra, đã khắc phục lỗi hiển thị dự phòng (365802559).
  • Mạng: Khắc phục bản xem trước GraphQL (369931288).
  • Hiệu suất: Hiện báo cáo tiến trình tăng dần của việc tải và xử lý dấu vết.
  • WebAuthn: Giờ đây, cập nhật động thông tin xác thực được sửa đổi bằng các phương thức signal* (368467199).
  • WebAssembly: Cảnh báo trong Console hiện sẽ thông báo cho bạn nếu có nhiều biểu tượng gỡ lỗi cho một mô-đun WebAssembly và mô-đun nào đang được sử dụng (40879198, 369515221).
  • Lớp phủ Các chỉ số quan trọng về trang web đã bị xoá khỏi thẻ Rendering (Hiển thị) 328487897.
  • Các tính năng AI tạo sinh hiện không yêu cầu đồng bộ hoá chế độ cài đặt Chrome.

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.

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.