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

Tìm hiểu rõ hơn về lỗi và cảnh báo trong Bảng điều khiển 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 do AI tạo về một lỗi hoặc cảnh báo, hãy nhấp vào nút Tìm hiểu lỗi (cảnh báo) này 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ẻ Elements (Thành phần) > Styles (Kiểu) hiện hỗ trợ các quy tắc CSS @position-try. Thẻ này phân giải các giá trị position-try-options và liên kết từng tuỳ chọn với một phần @position-try --name chuyên dụ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ác điểm cải tiến về 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 Trình chỉnh sửa trong 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.

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

Giờ đây, bảng điều khiển Sources (Nguồn) sẽ 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ạn bật Sources (Nguồn) > Breakpoints (Điểm ngắt) > check_box Pause on uncaught exceptions (Tạm dừng khi gặp ngoại lệ chưa được phát hiện), trình gỡ lỗi sẽ không tạm dừng trên 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 Console đi theo chuỗi nguyên nhân, nó sẽ in từng ngăn xếp lỗi có tiền tố Caused by:, vì vậy, bạn vẫn có thể thấy lỗi ban đầu.

Vấn đề về Chromium: 40182832.

Cải tiến 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 đề 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 bài viết Tăng tốc tải trang bằng thời gian suy nghĩ của máy chủ với tính năng Gợi ý sớm.

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ỏ đánh dấu ô check_box_outline_blank Waterfall (Dòng thác) trong trình đơn thả xuống.

Vấn đề về Chromium: 40574989.

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.

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 để cho phé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 chạy trong thời gian dài.

Để xem số liệu thống kê, hãy chọn một sự kiện Recalculate Style (Tính toán lại kiểu) rồi mở thẻ Selector Stats (Số liệu thống kê về bộ chọn) mới. Thẻ này cho bạn biết thông tin về thời gian đã trôi qua, số lần thử khớp và số lần khớp, cũng như tỷ lệ phần trăm không khớp theo đường dẫn chậm cho 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 các bản nhạc đó.

Để chuyển sang chế độ cấu hình, hãy nhấp vào nút chỉnh sửa Chỉnh sửa ở bên trái tên kênh. Sau đó, nhấp vào biểu tượng arrow_upward mũi tên lên hoặc arrow_downward mũi tên xuống để di chuyển bản nhạc hoặc nhấp vào biểu tượng 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 trình lưu giữ 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 phần tử giữ lại, hãy chọn một đối tượng, sau đó trong phần Retainer (Phần tử giữ lại), hãy nhấp chuột phải vào một phần tử giữ lại rồi chọn Ignore this retainer (Bỏ qua phần tử giữ lại này) trong 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 kiến thức 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.

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:

• 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).
• Console 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à 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).
• Thẻ Elements (Thành phần) > Styles (Kiểu) hiện thực hiện những việc sau:
  • Hiển thị các quy tắc kế thừa được nạp chồng đầy đủ với 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 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.

• 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 trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.