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

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 Phần tử, hãy nhấp chuột phải vào một phần tử rồi chọn Hỏi AI hoặc nhấp vào nút tương ứng bên cạnh phần tử đó. Công cụ cho nhà phát triển sẽ mở bảng điều khiển hỗ trợ AI mới.

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 cài đặt rồi quay lại bảng Hỗ trợ AI. Thuộc tính này sẽ lấy phần tử mà bạn đã chọn làm ngữ cảnh. Nhập câu hỏi về nguyên tố đó.

Để 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 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. 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 riêng

Giờ đây, bạn có thể quản lý tất cả tính năng AI ở cùng một nơi: phần cài đặt Cài đặt mới > thẻ Đổi mới về AI. Ứng dụng này liệt kê những điểm quan trọng cần cân nhắc, 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.

Để biết thêm thông tin, hãy xem phần Cài đặt > 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 chế độ đồng bộ hoá chế độ cài đặt cho các tính năng AI nữa. Vì vậy, bạn chỉ cần nhấp một lần là có thể sử dụng Thông tin chi tiết trên Play Console (cùng với tính năng hỗ trợ AI cho việc tạo kiểu) được phát hành trước đây.

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á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ú 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ẻ Chú thích mới trong thanh bên có thể mở rộng ở bên trái. Thanh bên này 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ả 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 và đánh dấu phạm vi 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 đã chú thích trở lại bảng điều khiển Hiệu suất.

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á các 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 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 cung cấp thông tin phân tích có hướng dẫn 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 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. Hãy để lại ý kiến phản hồi của bạn trên crbug.com/371170842.

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

Kênh Layout Changes (Thay đổi bố cục) sẽ 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.

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.

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 các hoạt ảnh không được ghép bằng các tam giác màu đỏ trên đường đi.
• Cho bạn biết lý do không kết hợp được trong thẻ Tóm tắt.

Để biết thêm thông tin, hãy xem bài viết Bám sát với thuộc tính chỉ dành cho trình tổng hợp và Quản lý số lượng 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 Môi trường đồng thời phần cứng sẽ chuyển từ bảng điều khiển Performance (Hiệu suất) sang vị trí thích hợp hơn – bảng điều khiển Sensor (Cảm biến).

Vấn đề về Chromium: 371463665.

Bỏ qua các 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 Bảng điều khiển hiện có thể phát hiện, bỏ qua, thu gọn và (nếu được mở rộng) các khung có màu xám đến từ các tệp có trong danh sách bỏ qua. 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 chế độ cài đặt mới Cài đặt > Danh sách bỏ qua > check_box 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.

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

Các vấn đề về Chromium: 40279542, 40945570, 345248263.

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

Thẻ Phần tử > Kiểu hiện hỗ trợ các loại sau:

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

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 trong 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ề khả năng hỗ trợ tiếp cận như sau:

• Trong Nguồn > 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 Phím cách.
• 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, bạn có thể truy cập vào thẻ Thông tin chi tiết trên thanh bên ở bên trái bằng bàn phím. Ngoài ra, các thẻ này cũng có thể được dùng để mở bằng thẻ.

Vấn đề về Chromium: 372411090.

Nội dung nổi bật khác

Dưới đây là một số nội dung 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).
• Ứng dụng > Dịch vụ nền > Tải theo suy đoán > Quy tắc hiện có nút {} bản in đẹp mắt tương tự như Nguồn > 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: Giờ đây, một cảnh báo trong Bảng điều khiển sẽ cho bạn biết liệu có nhiều biểu tượng gỡ lỗi cho một mô-đun WebAssembly hay không 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 việc sử dụng Chrome Canary, Nhà phát triển 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 Công cụ cho nhà phát triển, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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.

• 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 về Tính năng mới trong video trên YouTube trong Công cụ cho nhà phát triển hoặc Mẹo về công cụ cho nhà phát triển trong các video 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 viết Tính năng mới trong DevTools.