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 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 dành riêng cho từng loại vẫn giữ nguyên — một bộ huy hiệu sẽ nằm trên một thanh chọn nhiều mục 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á phần cài đặt 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ế đượ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ơ vô tình 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 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ũ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.

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 text-emphasis-* tài sản

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.

Nút 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.

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

Theo quyết định của Nhóm làm việc CSS về việc cho phép nội dung khai báo đơn xuất hiện sau các quy tắc lồng nhau, thẻ Kiểu hiện không "di chuyển" 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;
}

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 có 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 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 để phỏng đoán 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 (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: "chuyển" qua lại giữa các đường dẫn, ghi đè một đường dẫn con và xoá nhiều đường dẫn con. Trước đây, khi bạn chọn breadcrumb (tập hợp liên kết phân cấp gốc), đường dẫn 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 có 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 cho đố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 tuỳ chỉnh 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ẻ trong 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 đồ hoạ 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 cho biết "Thẻ này chia sẻ tài nguyên với các thẻ khác..." trong khi Công cụ cho nhà phát triển đang mở, thì tức là 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.

Nội dung 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: Sửa dấu "và" không có ký tự thoát trong các chuỗi nhiều dòng trong các lệnh cURL (352651673).
• Memory (Bộ nhớ): Sửa lựa chọn mặc định trên các trang có Service worker, luồng chính hiện được chọn (40669896).
• Bảo mật: Giao thức URL được làm nổi bật nay 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

Sử dụng các lựa chọn sau để thảo luận về các tính năng mới, bản cập nhật hoặc bất cứ điều gì 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác more_vert > Trợ giúp > Báo cáo sự cố trong Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @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 trong các video trên YouTube.

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.