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

Sofia Emelianova

Hiểu rõ hơn về các lỗi và cảnh báo trong Console nhờ Gemini

Phiên bản Chrome này mang các tính năng AI tạo sinh đến Bảng điều khiển của Công cụ cho nhà phát triển, nhằm giúp bạn hiểu rõ hơn về các lỗi và cảnh báo mà bạn gặp phải.

Để xem nội dung giải thích về lỗi hoặc cảnh báo do AI tạo, hãy nhấp vào nút Tìm hiểu về lỗi này (cảnh báo) bên cạnh thông báo trong Bảng điều khiển rồi làm theo hướng dẫn.

Để biết thêm thông tin, hãy xem bài viết Tìm hiểu rõ hơn về lỗi và cảnh báo nhờ AI.

Hỗ trợ quy tắc @position-try trong phần Elements (Phần tử) > Styles (Kiểu)

Để giúp bạn gỡ lỗi vị trí neo CSS, thẻ Phần tử > Kiểu hiện hỗ trợ @position-try quy tắc CSS. Thẻ này phân giải các giá trị position-try-options và liên kết mỗi lựa chọn với một phần @position-try --name riêng.

Để tìm hiểu thêm, hãy xem bài viết Giới thiệu API định vị neo CSS.

Vấn đề về Chromium: 40279608.

Cải tiến bảng điều khiển Nguồn

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Sources (Nguồn).

Định cấu hình tính năng tự động in đẹp và đóng ngoặc

Giờ đây, bạn có thể bật hoặc tắt tính năng tự động in đẹp và đóng dấu ngoặc cho Editor (Trình chỉnh sửa) trong phần Sources (Nguồn). Tính năng in đẹp giúp các tệp rút gọn có thể đọc được. Dấu đóng ngoặc sẽ tự động thêm dấu đóng ngoặc () hoặc }) hoặc thẻ (>) khi bạn nhập dấu mở ngoặc.

Để định cấu hình hành vi liên quan, hãy đánh dấu hoặc bỏ đánh dấu các tuỳ chọn check_box Tự động đóng dấu ngoặc và check_box Tự động in đẹp các nguồn đã rút gọn mới trong settings Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Sources (Nguồn).

Vấn đề về Chromium: 40865010, 324314570.

Lời hứa bị từ chối đã xử lý được ghi nhận là đã phát hiện được

Bảng điều khiển Sources (Nguồn) hiện nhận dạng chính xác các lời hứa bị từ chối là đã được phát hiện nếu bạn xử lý các lời hứa đó bằng .catch() hoặc .then() hai đối số.

Nói cách khác, khi bật Nguồn > Điểm ngắt > check_box Tạm dừng khi các trường hợp ngoại lệ chưa nắm bắt, trình gỡ lỗi sẽ không tạm dừng đối với các câu lệnh tương tự như sau:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Vấn đề về Chromium: 40283993.

Nguyên nhân gây ra lỗi trong Bảng điều khiển

Console hiện cho bạn thấy các chuỗi nguyên nhân gây ra lỗi trong dấu vết ngăn xếp (nếu có).

Để gỡ lỗi dễ dàng hơn, bạn có thể chỉ định nguyên nhân gây ra lỗi khi phát hiện và gửi lại lỗi. Khi Bảng điều khiển đi lên chuỗi nguyên nhân, bảng điều khiển sẽ in từng ngăn xếp lỗi với tiền tố Caused by:, do đó bạn vẫn có thể thấy lỗi ban đầu.

Vấn đề về Chromium: 40182832.

Cải tiến về 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.

Kiểm tra tiêu đề Gợi ý ban đầu

Các tiêu đề Gợi ý sớm sẽ có một phần riêng trong thẻ Tiêu đề của yêu cầu trong bảng điều khiển Mạng. Trước đây, bạn có thể tìm thấy các tiêu đề có liên quan trong phần Tiêu đề phản hồi.

Gợi ý sớm là một mã trạng thái HTTP (103 Early Hints) dùng để gửi phản hồi HTTP sơ bộ trước phản hồi cuối cùng. Điều này cho phép máy chủ gửi gợi ý đến trình duyệt về các tài nguyên phụ quan trọng (ví dụ: một trang kiểu hoặc JavaScript quan trọng) hoặc nguồn gốc mà trang có thể sử dụng, trong khi máy chủ đang bận tạo tài nguyên chính.

Để biết thêm thông tin, hãy xem phần Tải trang nhanh hơn nhờ tính năng thời gian suy nghĩ của máy chủ với tính năng Gợi ý ban đầu.

Vấn đề về Chromium: 40222701.

Ẩn cột Thác nước

Giờ đây, bạn có thể ẩn cột Thác nước trong bảng điều khiển Mạng tương tự như cách ẩn các cột khác. Nhấp chuột phải vào tên cột bất kỳ rồi bỏ chọn hộp đánh dấu check_box_outline_blank Thác nước trong trình đơn thả xuống.

Vấn đề về Chromium: 40574989.

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.

Thu thập số liệu thống kê về bộ chọn CSS

Bảng điều khiển Hiệu suất có một chế độ cài đặt mới giúp bạn thu thập số liệu thống kê về bộ chọn CSS cho các sự kiện Tính toán lại kiểu dài hạn.

Để xem số liệu thống kê, hãy chọn sự kiện Tính toán lại kiểu và mở thẻ Số liệu thống kê về bộ chọn mới. Thẻ này hiển thị cho bạn thông tin về thời gian đã trôi qua, số lượt nhập và số lượt tìm nạp cũng như tỷ lệ phần trăm đường dẫn chậm không khớp với mỗi bộ chọn.

Vấn đề về Chromium: 324282954.

Thay đổi thứ tự và ẩn các bản nhạc

Bảng điều khiển Hiệu suất có chế độ cấu hình mới cho phép bạn thay đổi thứ tự của các bản nhạc và ẩn chúng.

Để chuyển sang chế độ cấu hình, hãy nhấp vào nút chỉnh sửa Edit ở bên trái tên bản nhạc. Sau đó nhấp vào arrow_upward lên hoặc arrow_downward xuống dưới để di chuyển tuyến đường hoặc nhấp vào visibility_off ẩn. Nhấp vào nút xong Kiểm tra ở bên phải tên bản nhạc khi bạn hoàn tất.

Phiên bản tiếp theo, Chrome 126, sẽ cải thiện thêm giao diện người dùng này.

Vấn đề về Chromium: 311439339.

Bỏ qua các phần giữ lại trong bảng điều khiển Bộ nhớ

Giờ đây, bạn có thể bỏ qua các phần giữ lại trong ảnh chụp nhanh vùng nhớ khối xếp mà bạn chụp bằng bảng điều khiển Memory (Bộ nhớ).

Để bỏ qua một trình lưu giữ, hãy chọn một đối tượng và trong phần Placeholder (Trình lưu giữ), hãy nhấp chuột phải vào một trình lưu giữ rồi chọn Ignore this keeper (Bỏ qua trình lưu giữ này) từ trình đơn thả xuống. Các phần tử giữ lại bị bỏ qua được đánh dấu bằng giá trị ignored trong cột Khoảng cách. Để ngừng bỏ qua, hãy nhấp vào Khôi phục các trình lưu giữ đã bỏ qua trong thanh thao tác ở trên cùng.

Ngoài ra, ảnh chụp nhanh vùng nhớ khối xếp hiện hỗ trợ số lượng lớn hơn (hàng trăm triệu) các cạnh và nút chứa (332350576).

Vấn đề về Chromium: 327337527.

Lighthouse 11.7.1

Bảng điều khiển Lighthouse hiện đã chạy Lighthouse 11.7.1. Xem danh sách đầy đủ các thay đổi.

Trong số các thay đổi đáng chú ý là việc ngừng hỗ trợ trình bổ trợ Quảng cáo của nhà xuất bản. Trình bổ trợ này đã lỗi thời trong phiên bản này.

Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

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:

• Bảng điều khiển Recorder (Máy ghi âm) hiện đã chính thức không còn ở trạng thái xem trước (329271496).
• Bảng điều khiển hiện không hiển thị lỗi khi trình định dạng tuỳ chỉnh trả về null cho hàm body(). Đây là một hành vi hợp lệ (329400119).
• Cụ thể, bảng điều khiển Sources (Nguồn) đã cập nhật trình làm nổi bật cú pháp, hiện hỗ trợ cờ v và d trong biểu thức chính quy.
• Thẻ Mạng > Cookie đã khắc phục lỗi liên kết cookie được miễn trừ với cookie phản hồi (41491846).
• Giờ đây, thẻ Phần tử > Kiểu sẽ thực hiện những việc sau:
  • Hiển thị các quy tắc kế thừa bị quá tải hoàn toàn bằng các thuộc tính tuỳ chỉnh (41489874).
  • Làm nổi bật giá trị đã áp dụng trong light-dark() tuỳ thuộc vào giao diện màu (331123816).

Tải 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 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 phản hồi và yêu cầu 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.
• Tweet tại @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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.