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 Bảng điều khiển nhờ Gemini

Phiên bản Chrome này mang đến các chức năng AI tạo sinh cho 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.

Để nhận được lời 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 Hiểu rõ 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ợ @position-try trong Elements > Styles (Phần tử > Kiểu)

Để giúp bạn gỡ lỗi vị trí của phần tử neo CSS, thẻ Phần tử > 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 lựa 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 về CSS Anchor Positioning API.

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 định dạng và đóng dấu ngoặc cho Trình chỉnh sửa trong Nguồn. Tạo bản in đẹp giúp bạn đọc được các tệp rút gọn. Tính năng tự động đóng dấu ngoặc sẽ tự động thêm dấu ngoặc đóng () hoặc }) hoặc thẻ (>) khi bạn nhập dấu ngoặc mở.

Để định cấu hình hành vi có liên quan, hãy đánh dấu hoặc bỏ đánh dấu check_box Auto closing brackets (Tự động đóng dấu ngoặc) và check_box Automatically pretty print minified sources (Tự động in nguồn được rút gọn theo cách dễ đọc) trong settings (cài đặt) Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Sources (Nguồn).

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

Các promise bị từ chối đã được xử lý được coi là đã bắt được

Giờ đây, bảng điều khiển Nguồn nhận dạng chính xác các lời hứa bị từ chối là đã được nắm bắt nếu bạn xử lý chúng bằng .catch() hoặc .then() có 2 đố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 xử lý), trình gỡ lỗi sẽ không tạm dừng ở những 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

Giờ đây, Bảng điều khiển sẽ cho bạn thấy 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 bắt và truyền lại lỗi. Khi Bảng điều khiển đi theo chuỗi nguyên nhân, bảng điều khiển sẽ in từng ngăn xếp lỗi bằng tiền tố Caused by:, nhờ đó 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 có một số điểm cải tiến đối với bảng điều khiển Mạng.

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

Tiêu đề Gợi ý ban đầu 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 ý ban đầu là một mã trạng thái HTTP (103 Early Hints) dùng để gửi một 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 ý cho trình duyệt về các tài nguyên phụ quan trọng (ví dụ: biểu định kiểu hoặc JavaScript quan trọng) hoặc nguồn gốc mà trang có khả năng 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ải trang nhanh hơn bằng cách sử dụng thời gian suy nghĩ của máy chủ với 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 Mạng tương tự như cách bạn có thể ẩ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 ô check_box_outline_blank Thác nước trong trình đơn thả xuống.

Vấn đề về Chromium: 40574989.

Cải thiệ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 diễn ra trong thời gian dài.

Để xem số liệu thống kê, hãy chọn 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 đường dẫn chậm không khớp cho từng bộ chọn.

Vấn đề về Chromium: 324282954.

Thay đổi thứ tự và ẩn các kênh

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ế độ định 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 bản nhạc. Sau đó, hãy nhấp vào biểu tượng arrow_upward lên hoặc arrow_downward xuống để di chuyển bản phụ đề 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 đường chạy khi bạn hoàn tất.

Phiên bản tiếp theo, Chrome 126, sẽ mang đến nhiều điểm cải tiến hơn cho 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 đối tượng giữ lại trong ảnh chụp nhanh heap mà bạn chụp bằng bảng điều khiển Memory (Bộ nhớ).

Để bỏ qua một giá đỡ, hãy chọn một đối tượng rồi trong phần Giá đỡ, nhấp chuột phải vào một giá đỡ rồi chọn Bỏ qua giá đỡ này trong trình đơn thả xuống. Những người được giữ lại bị bỏ qua sẽ được đánh dấu bằng giá trị ignored trong cột Distance (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 heap 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

Giờ đây, bảng Lighthouse chạy Lighthouse 11.7.1. Xem danh sách đầy đủ các thay đổi.

Trong số những thay đổi đáng chú ý, có 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 những kiến thức cơ bản về cách sử dụng bảng 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 cải tiến và bản sửa lỗi đáng chú ý trong bản phát hành này:

• Ngăn Trình ghi hiện đã chính thức không còn ở trạng thái xem trước (329271496).
• Giờ đây, Bảng điều khiển sẽ 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).
• Bảng điều khiển Nguồn đã cập nhật trình làm nổi bật cú pháp, đặc biệt là hiện hỗ trợ các cờ v và d trong biểu thức chính quy.
• Thẻ Mạng > Cookie đã khắc phục một lỗi khi ánh xạ cookie được miễn trừ với cookie phản hồi (41491846).
• Thẻ Phần tử > Kiểu hiện có những chức năng sau:
  • Hiển thị các quy tắc kế thừa bị ghi đè hoàn toàn bằng các thuộc tính tuỳ chỉnh (41489874).
  • Làm nổi bật giá trị được á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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

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 mới, nội dung cập nhật 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.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" 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 Tính năng mới trong Công cụ cho nhà phát triển.