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 mang đến một số điểm cải tiến cho 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 bộ huy hiệu trong thanh nhiều lựa chọn rõ ràng.

Để làm gọn giao diện người dùng, hãy di chuyển các hộp đánh dấu liên quan đến tính năng ẩn, chặn và bên thứ ba vào danh sách thả xuống. Danh sách này có một con 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 Settings (Cài đặt) > Experiments (Thử nghiệm) > check_box_outline_blank Redesign of the filter bar in the Network panel (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ế được thiết kế lại.

Vấn đề về Chromium: 362672528.

Theo mặc định, tệp xuất HAR hiện sẽ loại trừ dữ liệu nhạy cảm

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

Để xuất nhật ký ở định dạng HAR cùng dữ liệu nhạy cảm, hãy bật settings Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Network (Mạng) > check_box Allow to generate HAR with sensitive data (Cho phép tạo HAR chứa 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 Export HAR (with sensitive data) (Xuất HAR (có 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 điều khiển Elements (Thành phần).

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 các thuộc tính CSS sau:

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

Vấn đề về Chromium: 361471205.

Cuộn tràn được đánh dấu bằng huy hiệu

Bảng điều khiển Elements (Phần tử) hiện đánh dấu bằng huy hiệu "scroll" (cuộn) mới cho các 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 các phần tử 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à biến mất nếu nội dung ngừng tràn lề do, ví dụ: thay đổi kích thước.

Vấn đề về Chromium: 40670442.

Các nội dung khai báo trần sau các quy tắc lồng nhau không "chuyển lên trên"

Theo quyết định của Nhóm làm việc về CSS để cho phép các nội dung khai báo trần xuất hiện sau các quy tắc lồng nhau, thẻ Styles (Kiểu) hiện không "chuyển lên trên" các nội dung khai báo này trong quá trình phân tích cú pháp.

Trong mã mẫu sau đây, phần 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 trong trình tự lũy tiến một cách không mong muốn:

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

  background-color: green;
}

Vấn đề về Chromium: 358119261.

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.

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

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

Để nhận đề xuất, hãy thiết lập tính năng tìm nạp dữ liệu thực tế từ Báo cáo trải nghiệm người dùng trên Chrome (CrUX) và mở rộng phần Xem xét điều kiện kiểm thử cục bộ trong mỗi thẻ chỉ số (nếu có) và Xem xét môi trường người dùng thực tế trong phần 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.

Di chuyển theo đường dẫn liên kết phân cấp

Giờ đây, bạn có thể điều hướng breadcrumb trong tiến trình ghi lại hiệu suất: "nhảy" qua lại giữa các breadcrumb, ghi đè breadcrumb con và xoá nhiều breadcrumb con. Trước đây, khi bạn chọn một đường dẫn mẹ, các đường dẫn con 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 Memory (Bộ nhớ).

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

Bảng điều khiển Memory (Bộ nhớ) có một loại hồ sơ mới là Detached elements (Thành phần tách rời). Thẻ này cho biết những đối tượng được giữ lại bằng tham chiếu JavaScript.

Vấn đề về Chromium: 350519222.

Cải thiện cách đặt tên đố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 đặ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 các tên này do DevTools tạo.
• Đượ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 giao diện động

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

Để tắt tính năng tuỳ chỉnh giao diện động, hãy xoá chế độ cài đặt Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Appearance (Giao diện) > check_box_outline_blank Match Chrome color scheme (So khớp bảng phối màu của Chrome) rồi tải lại DevTools.

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ẻ trên 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 mỗi 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 bạn 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 DevTools đang mở, thì bạn thuộc nhóm nhỏ đã bật thử nghiệm Chia sẻ quy trình.

Việc chia sẻ quy trình có thể ảnh hưởng đến hoạt động 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 của Chrome: Chia sẻ quy trình.

Lighthouse 12.2.1

Bảng điều khiển Lighthouse hiện 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 việc tiết kiệm dung lượng tệp một cách có ý nghĩa. Xem danh sách đầy đủ các thay đổi.

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

• Thành phần:
  • Nhiều bản sửa lỗi để 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 các thuộc tính tuỳ chỉnh đã xác định nhưng có giá trị trống là không xác định (365578428).
• Bảng điều khiển: Khắc phục dấu và không thoát trong các chuỗi nhiều dòng trong lệnh cURL (352651673).
• Bộ nhớ: Khắc phục lựa chọn mặc định trên các trang có trình chạy dịch vụ, luồng chính hiện đã được chọn (40669896).
• Bảo mật: Tính năng làm nổi bật lược đồ URL hiện cập nhật chính xác khi giai đoạn bảo mật của một nguồn gốc 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 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.