Trang này được dịch bởi Cloud Translation API.

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 cung cấp các tính 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.

Để 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 lỗi này (cảnh báo) bên cạnh thông báo trong Console (Bảng điều khiển) rồi làm theo hướng dẫn.

Nội dung giải thích về lỗi do AI tạo.

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

Hỗ trợ `@position-try` quy tắc trong phần tử > 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 từng tuỳ chọn với một phần @position-try --name riêng.

Trước và sau khi hỗ trợ các quy tắc CSS @position-try.

Để tìm hiểu thêm, hãy xem nội dung Chia sẻ các phần tử với nhau bằng vị trí neo CSS.

Vấn đề với 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 Nguồn.

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

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

Để định cấu hình hoạt động có liên quan, hãy chọn hoặc xóa các tùy chọn check_box Tự động đóng dấu ngoặc và check_box Tự động in nguồn được giảm kích thước trong phần cài đặt Cài đặt > Lựa chọn ưu tiên > Nguồn.

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

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

Bảng điều khiển Sources (Nguồn) giờ đây sẽ nhận dạng chính xác các lời hứa bị từ chối đã đượ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 > Breakpoints > check_box Tạm dừng khi gặp 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 những câu lệnh tương tự như sau:

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

Trước và sau khi nhận ra trường hợp bị từ chối bị phát hiện.

Vấn đề với Chromium: 40283993.

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

Giờ đây, Bảng điều khiển sẽ hiển thị cho bạn các chuỗi nguyên nhân 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 lỗi khi phát hiện và gửi lại lỗi. Khi Console (Bảng điều khiển) đi theo chuỗi nguyên nhân, công cụ này sẽ in từng ngăn xếp lỗi có tiền tố Caused by: để bạn vẫn có thể thấy lỗi ban đầu.

Dấu vết ngăn xếp trước và sau khi in có tiền tố "Caused by".

Vấn đề với 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 cho bảng điều khiển Mạng.

Kiểm tra tiêu đề Gợi ý sớm

Các tiêu đề Gợi ý sớm có một phần riêng trong thẻ Tiêu đề của yêu cầu trên 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ã trạng thái HTTP (103 Early Hints) dùng để gửi một phản hồi HTTP sơ bộ trước khi gửi 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 có thể được trang sử dụng, trong khi máy chủ đang bận tạo tài nguyên chính.

Trước và sau khi thêm một phần riêng cho Gợi ý sớm.

Để biết thêm thông tin, hãy xem bài viết Tải trang nhanh hơn bằng thời gian suy nghĩ của máy chủ nhờ tính năng Gợi ý sớm.

Sự cố 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 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ỏ đánh dấu hộp check_box_outline_blank Thác nước trong trình đơn thả xuống.

Trước và sau khi thêm tuỳ chọn ẩn cột Thác nước.

Vấn đề với Chromium: 40574989.

Cải tiến bảng điều khiển hiệu suất

Phiên bản này có 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 Tính toán lại kiểu và mở thẻ Số liệu thống kê 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ần so khớp và số lần so khớp cũng như tỷ lệ phần trăm đường dẫn chậm không khớp với từng bộ chọn.

Trước và sau khi thêm số liệu thống kê về bộ chọn.

Vấn đề với Chromium: 324282954.

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

Bảng điều khiển Performance (Hiệu suất) có một 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 những bản nhạc đó.

Để vào chế độ cấu hình, 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 đó, nhấp vào arrow_upward (hướng lên trên) hoặc arrow_downward (mũi tên xuống) để 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ẽ mang đến nhiều cải tiến hơn cho giao diện người dùng này.

Vấn đề với 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 thành phần lưu giữ trong ảnh chụp nhanh của 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 rồi trong phần 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 Bỏ qua trình lưu giữ này trong trình đơn thả xuống. Các phần giữ lại bị bỏ qua được đánh dấu bằng giá trị ignored trong cột Khoảng cách. Để dừng bỏ qua, hãy nhấp vào Khôi phục người dùng lưu giữ đã bỏ qua trong thanh thao tác ở trên cùng.

Trước và sau khi thêm tuỳ chọn bỏ qua trình lưu giữ.

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

Vấn đề với 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.

Một trong những thay đổi đáng chú ý là tính năng hỗ trợ đã ngừng hoạt động cho 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.

Trước và sau khi thêm tính năng hỗ trợ trình bổ trợ Quảng cáo của nhà xuất bản.

Để 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.

Sự cố Chromium: 772558.

Thông tin nổi bật khác

Dưới đây là một số bản 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 (Ghi lại) nay đã chính thức không còn ở trạng thái xem trước (329271496).
Console (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).
Bảng điều khiển Sources (Nguồn) đã cập nhật công cụ đánh dấu cú pháp, cụ thể là nay hỗ trợ cờ v và d trong biểu thức chính quy.
Thẻ Network > Cookie đã khắc phục lỗi trong đó việc ánh xạ các cookie được miễn trừ cookie vào cookie phản hồi (41491846).
Giờ đây, thẻ Elements (Phần tử) > Styles (Kiểu) sẽ thực hiện những việc sau:
- Hiển thị các quy tắc kế thừa 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ị được á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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.