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

Sofia Emelianova

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.

Bộ lọc mạng được thiết kế lại

Bảng điều khiển Mạng có các bộ lọc mới, được thiết kế lại dựa trên ý kiến phản hồi của bạn. Các bộ lọc theo loại vẫn giữ nguyên – một nhóm huy hiệu trong thanh chọn nhiều rõ ràng.

Để đơn giản hoá giao diện người dùng, các hộp đánh dấu liên quan đến việc ẩn, chặn và bên thứ ba sẽ chuyển xuống dưới danh sách thả xuống. Danh sách này có một số cho biết số lượng bộ lọc được đánh dấu trong trình đơn thả xuống.

Để khôi phục thiết kế bộ lọc cũ, hãy xoá settings Cài đặt > Thử nghiệm > check_box_outline_blank Thiết kế lại thanh bộ lọc trong bảng điều khiển Mạng.

Hãy cho chúng tôi biết ý kiến của bạn về thiết kế mới.

Vấn đề về Chromium: 362672528.

Theo mặc định, các tệp HAR xuất ra hiện không bao gồm dữ liệu nhạy cảm

Để giảm nguy cơ vô tình làm rò rỉ thông tin nhạy cảm, theo mặc định, nhật ký mạng được xuất ở định dạng HAR sẽ không còn chứa các tiêu đề Cookie, Set-Cookie và Authorization nữa.

Để xuất nhật ký ở định dạng HAR kèm theo dữ liệu nhạy cảm, hãy bật chế độ cài đặt Cài đặt > Lựa chọn ưu tiên > Mạng > check_box Cho phép tạo HAR kèm theo dữ liệu nhạy cảm. Bảng điều khiển Mạng sẽ đánh dấu nút tải xuống Xuất bằng một mũi tên. Nhấp và giữ nút này rồi chọn Xuất HAR (kèm theo dữ liệu nhạy cảm) trong trình đơn thả xuống.

Vấn đề về Chromium: 361717594.

Cải tiến bảng điều khiển Phần tử

Phiên bản này mang đến một số điểm cải tiến cho bảng Phần tử.

Giá trị tự động hoàn thành cho các thuộc tính text-emphasis-*

Tính năng tự động hoàn thành trong thẻ Kiểu hiện đề xuất các giá trị cho những thuộc tính CSS sau:

• text-emphasis viết tắt
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Vấn đề về Chromium: 361471205.

Phần nội dung tràn được đánh dấu bằng một huy hiệu

Giờ đây, bảng điều khiển Phần tử sẽ đánh dấu bằng huy hiệu "cuộn" mới cho những phần tử chứa nội dung tràn và có overflow: scroll hoặc overflow: auto, nhờ đó bạn có thể dễ dàng phát hiện nội dung tràn khi cuộn. Giống như các huy hiệu khác, huy hiệu này phản ánh DOM hiện tại và sẽ biến mất nếu nội dung không còn tràn nữa, chẳng hạn như do thay đổi kích thước.

Vấn đề về Chromium: 40670442.

Các khai báo trần sau các quy tắc lồng nhau không "dịch chuyển lên"

Sau quyết định của Nhóm công tác về CSS là cho phép các khai báo đơn giản xuất hiện sau các quy tắc lồng nhau, giờ đây, thẻ Kiểu sẽ không "dịch chuyển lên" các khai báo này trong quá trình phân tích cú pháp.

Trong mã mẫu sau đây, khai báo trần sau quy tắc lồng nhau hiện không khiến Chrome sắp xếp lại các kiểu một cách bất ngờ trong tầng:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Vấn đề về Chromium: 358119261.

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.

Đề xuất trong chỉ số trực tiếp

Chỉ số trực tiếp hiện có thể cung cấp các đề xuất cụ thể về chỉ số để giúp bạn định cấu hình môi trường phát triển gần giống nhất có thể với trải nghiệm của người dùng.

Để nhận được đề xuất, hãy thiết lập tính năng tìm nạp dữ liệu thực tế tại trang từ Báo cáo trải nghiệm người dùng trên Chrome (CrUX), đồng thời mở rộng phần Cân nhắc các điều kiện kiểm thử cục bộ trong mỗi thẻ chỉ số (nếu có) và Cân nhắc môi trường của người dùng thực trong phần Chế độ cài đặt môi trường.

Làm theo các đề xuất để ước chừng trải nghiệm của người dùng.

Các đường dẫn điều hướng

Giờ đây, bạn có thể di chuyển breadcrumb (tập hợp liên kết phân cấp) trong dòng thời gian của bản ghi hiệu suất: "nhảy" qua lại giữa các breadcrumb, ghi đè một breadcrumb con và xoá nhiều breadcrumb con. Trước đây, khi bạn chọn một đường dẫn phân cấp mẹ, các đường dẫn phân cấp con của đường dẫn đó sẽ biến mất.

Cải tiến bảng điều khiển bộ nhớ

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Bộ nhớ.

Hồ sơ "Các phần tử đã tách" mới

Bảng Bộ nhớ có một loại hồ sơ mới là Các phần tử tách rời. Công cụ này cho biết những đối tượng được giữ lại bằng một tham chiếu JavaScript.

Vấn đề về Chromium: 350519222.

Cải thiện cách đặt tên cho các đối tượng JS thuần tuý

Để sắp xếp và dọn dẹp danh mục Object trong ảnh chụp nhanh vùng nhớ khối xếp, các đối tượng JavaScript thuần tuý hiện có:

• Được đặt tên dựa trên các thuộc tính mà chúng chứa, ví dụ: {firstProperty, secondProperty, ..., *nthProperty}.
• Bạn có thể tìm kiếm theo những tên do Công cụ cho nhà phát triển tạo ra.
• Được nhóm lại với nhau nếu có cùng thuộc tính.

Vấn đề về Chromium: 350519222.

Tắt tính năng tạo giao diện động

Giờ đây, bạn có thể tắt tính năng tự động khớp màu sắc của Công cụ cho nhà phát triển với màu sắc của giao diện tuỳ chỉnh trong Chrome.

Để tắt tính năng tạo giao diện động, hãy xoá settings Cài đặt > Lựa chọn ưu tiên > Giao diện > check_box_outline_blank So khớp bảng phối màu của Chrome rồi tải lại Công cụ cho nhà phát triển.

Vấn đề về Chromium: 328472696.

Thử nghiệm trên Chrome: Chia sẻ quy trình

Thông thường, khi bạn mở nhiều thẻ từ cùng một trang web (chẳng hạn như Google Tài liệu), Chrome sẽ tạo một quy trình kết xuất riêng cho từng thẻ. Thử nghiệm Chia sẻ quy trình sẽ thay đổi điều này bằng cách cho phép nhiều thẻ chia sẻ cùng một quy trình kết xuất để cải thiện hiệu suất.

Nếu thấy thông báo "Thẻ này dùng chung tài nguyên với các thẻ khác..." trên thanh thông tin khi Công cụ cho nhà phát triển đang mở, thì tức là bạn thuộc nhóm nhỏ có bật thử nghiệm Chia sẻ quy trình.

Việc chia sẻ quy trình có thể ảnh hưởng đến việc gỡ lỗi điểm ngắt và phân tích hiệu suất. Để biết thêm thông tin, hãy xem bài viết Thử nghiệm Chrome: Chia sẻ quy trình.

Lighthouse 12.2.1

Giờ đây, bảng Lighthouse chạy Lighthouse 12.2.1.

Bản cập nhật này giới thiệu ngưỡng bỏ qua < 20 KB cho các đề xuất nén tài nguyên để giúp bạn chỉ tập trung vào mức tiết kiệm dung lượng tệp có ý nghĩa. Xem danh sách đầy đủ các thay đổi.

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

• Phần tử:
  • Nhiều bản sửa lỗi cho việc chỉnh sửa CSS lồng nhau (41486635, 361477264, 328263458, 41487826).
  • Đã khắc phục lỗi phân tích cú pháp thuộc tính tuỳ chỉnh được xác định nhưng có giá trị trống dưới dạng không xác định (365578428).
• Bảng điều khiển: Đã khắc phục dấu và không được thoát trong các chuỗi nhiều dòng trong lệnh cURL (352651673).
• Bộ nhớ: Đã sửa lựa chọn mặc định trên các trang có worker dịch vụ, hiện đã chọn luồng chính (40669896).
• Bảo mật: Giờ đây, lược đồ URL làm nổi bật sẽ cập nhật chính xác khi giai đoạn bảo mật của một nguồn thay đổi (359920086).

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.