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 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 và đượ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.

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

Trước và sau khi di chuyển các bộ lọc ẩn, chặn và liên quan đến bên thứ ba vào trình đơn thả xuống.

Để khôi phục thiết kế bộ lọc cũ, hãy xoá Cài đặt > Thử nghiệm > 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 suy nghĩ của bạn về thiết kế mới này.

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 phần Cài đặt > Lựa chọn ưu tiên > Mạng > Cho phép tạo HAR có dữ liệu nhạy cảm. Bảng điều khiển Mạng sẽ đánh dấu nút Xuất bằng mũi tên. Nhấp và giữ nút này rồi chọn Xuất HAR (có dữ liệu nhạy cảm) trong trình đơn thả xuống.

Trước và sau khi thêm các lựa chọn xuất có và không có dữ liệu nhạy cảm vào tính năng xuất HAR.

Vấn đề về Chromium: 361717594.

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

Phiên bản này có một số điểm cải tiến cho bảng điều khiển 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 các thuộc tính CSS sau:

Trước và sau khi thêm tuỳ chọn tự động hoàn thành cho thuộc tính "text-emphasis-*".

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, chẳng hạn như do sự thay đổi về 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 thừa một cách không mong muốn:

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

  background-color: green;
}

Trước và sau khi cho phép nội dung khai báo trần xuất hiện sau các quy tắc lồng nhau.

Vấn đề về Chromium: 358119261.

Các điểm cải tiến về 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.

Các đề xuất trong các chỉ số trực tiếp

Chỉ số trực tiếp hiện có thể cung cấp đề xuất theo từng chỉ số cụ thể giúp bạn thiết lập môi trường phát triển càng giống với trải nghiệm của người dùng càng tốt.

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

Mở rộng các mục có đề xuất.

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

Điều hướng theo đường dẫn 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 có một số điểm cải tiến cho bảng điều khiển Memory (Bộ nhớ).

"Các phần tử tách rời" mới hồ sơ

Bảng điều khiển Memory (Bộ nhớ) sẽ có một loại hồ sơ mới: Các phần tử tách biệt. 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à sắp xếp gọn gàng danh mục Object trong ảnh chụp nhanh của vùng nhớ khối xếp, các đối tượng JavaScript thuần tuý hiện là:

Được đặt tên dựa trên các thuộc tính trong đó, 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 tài sản đó có cùng thuộc tính.

Trước và sau khi sắp xếp danh mục Đối tượng trong ảnh chụp nhanh của vùng nhớ khối xếp.

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 của bạn trong Chrome.

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

Trước và sau khi tắt tính năng tuỳ chỉnh giao diện động.

Vấn đề về Chromium: 328472696.

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

Thông tin trên thanh thông tin "Thẻ này dùng chung tài nguyên với các thẻ khác...".

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

Dưới đây là một số nội dung 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 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 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 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, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

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 và thay đổi mới trong bài đăng 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 đề xuất hoặc ý kiến 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 biểu tượng 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 về Tính năng mới trong video trên YouTube trong Công cụ cho nhà phát triển hoặc Mẹo về công cụ cho nhà phát triển trên YouTube.