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

Cải tiến thành phần

Huy hiệu mới về lưới con CSS

Bảng điều khiển Elements (Thành phần) sẽ có huy hiệu subgrid mới cho subgrid (lưới con). Tính năng này hiện đang trong giai đoạn thử nghiệm trong Chrome Canary.

Để kiểm tra và gỡ lỗi lưới lồng nhau là lưới con, do đó kế thừa số lượng và kích thước của các kênh từ lưới mẹ, hãy nhấp vào huy hiệu. Thao tác này sẽ bật/tắt một lớp phủ hiển thị các cột, hàng và số của các cột, hàng đó ở đầu phần tử trong khung nhìn.

Để biết danh sách tất cả huy hiệu trong bảng điều khiển Elements (Thành phần), hãy xem Tài liệu tham khảo về huy hiệu.

Vấn đề về Chromium: 1442536.

Tính cụ thể của bộ chọn trong chú giải công cụ

Trong Elements (Thành phần) > Styles (Kiểu), hãy di chuột qua tên bộ chọn để xem weight of specificity (tỷ lệ theo mức độ cụ thể) trong chú giải công cụ.

Vấn đề về Chromium: 1204932.

Giá trị của các thuộc tính CSS tuỳ chỉnh trong chú giải công cụ

Trong Elements (Phần tử) > Styles (Kiểu), hãy di chuột qua tên thuộc tính CSS tuỳ chỉnh để xem giá trị của thuộc tính đó trong chú giải công cụ.

Nhóm Công cụ cho nhà phát triển xin gửi lời cảm ơn đến 一丝 và Suyan vì đã mang đến điểm cải tiến này.

Vấn đề về Chromium: 1380779.

Cải tiến nguồn

Làm nổi bật cú pháp CSS

Bảng điều khiển Nguồn nhận được các thông tin sau cho các tệp CSS được xử lý trước, chẳng hạn như SASS, SCSS và LESS:

• Làm nổi bật cú pháp.
• Hỗ trợ trình chỉnh sửa cùng dòng. Các trình chỉnh sửa này tương tự như các trình chỉnh sửa trong Elements (Thành phần) > Styles (Kiểu), ví dụ: Color Picker (Bộ chọn màu) và Easing Editor (Trình chỉnh sửa hiệu ứng chuyển động).

Vấn đề về Chromium: 1302261, 1392085.

Lối tắt để đặt điểm ngắt có điều kiện

Giờ đây, bạn có thể đặt điểm ngắt có điều kiện nhanh hơn bằng một phím tắt. Để mở hộp thoại điểm ngắt, hãy giữ phím Command (MacOS) hoặc Control (Windows / Linux) rồi nhấp vào số dòng trong cột bên trái của Sources (Nguồn) > Editor (Trình chỉnh sửa).

Vấn đề về Chromium: 1405767.

Ứng dụng > Giảm thiểu hoạt động theo dõi số trang không truy cập

Thử nghiệm Giảm thiểu tính năng Theo dõi lượt thoát trong Chrome cho phép bạn xác định và xoá trạng thái của những trang web có vẻ như đang thực hiện hoạt động theo dõi trên nhiều trang web bằng kỹ thuật theo dõi lượt thoát. Ngăn Application (Ứng dụng) > Background Services (Dịch vụ nền) sẽ có một thẻ Bounce Tracking Mitigations (Giảm thiểu tính năng theo dõi lượt thoát) mới. Thẻ này cho phép bạn buộc giảm thiểu tính năng theo dõi theo cách thủ công và liệt kê các trang web đã bị xoá trạng thái.

Hãy xem tính năng bảo mật này:

1. Chặn cookie của bên thứ ba trong Chrome. Chuyển đến và bật > Cài đặt > Quyền riêng tư và bảo mật > Cookie và các dữ liệu khác của trang web > Chặn cookie của bên thứ ba.
2. Trong chrome://flags, hãy đặt thử nghiệm Giảm thiểu hoạt động theo dõi tỷ lệ thoát thành Đã bật và xoá.
3. Kiểm tra trang minh hoạ này, mở Application (Ứng dụng) > Background Services (Dịch vụ trong nền) > Bounce Tracking Mitigations (Giảm thiểu tính năng theo dõi lượt thoát), nhấp vào một đường liên kết thoát trên trang, đợi (10 giây) để Chrome ghi lại lượt thoát rồi nhấp vào Force run (Buộc chạy) để xoá trạng thái ngay lập tức.

Ngoài ra, thẻ Vấn đề sẽ cảnh báo bạn về việc xoá trạng thái sắp tới.

Vấn đề về Chromium: 1432303.

Lighthouse 10.2.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 10.2.0. Đáng chú ý nhất là tính năng kiểm tra Thời gian hiển thị nội dung lớn nhất sẽ nhận được một bảng có các phép tính theo giai đoạn cho việc điều tiết được mô phỏng và DevTools. Xem thêm 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.

Bỏ qua tập lệnh nội dung theo mặc định

Cài đặt > Danh sách bỏ qua > Tập lệnh nội dung do các tiện ích chèn hiện được bật theo mặc định.

Khi bật chế độ cài đặt này:

• Trình gỡ lỗi bỏ qua các tập lệnh như vậy và không dừng lại ở các trường hợp ngoại lệ do các tập lệnh đó gửi.
• Ngăn Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi) sẽ bỏ qua các khung bị bỏ qua. Để tắt tính năng bỏ qua ở đây, hãy đánh dấu vào Hiện các khung có trong danh sách bỏ qua.
• Console thu gọn các khung bị bỏ qua trong dấu vết ngăn xếp. Nhấp vào Hiện thêm N khung để mở rộng và Hiện ít hơn để thu gọn lại.

Ngoài ra, các hộp đánh dấu trong Danh sách bỏ qua có văn bản rõ ràng hơn.

Vấn đề về Chromium: 1440958, 1364501.

Mạng > In đẹp phản hồi theo mặc định

Ngăn Network (Mạng) > Response (Phản hồi) hiện in đẹp phần nội dung phản hồi được rút gọn theo mặc định, tương tự như ngăn Sources (Nguồn).

Ngoài ra, các tệp SVG sẽ được làm nổi bật cú pháp.

Vấn đề về Chromium: 1382752, 1385374.

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:

• Cài đặt > Thiết bị: Thêm Facebook for Android v407 trên Pixel 6 vào danh sách chuỗi tác nhân.
• Mạng: Thêm lối tắt Xoá nhật ký mạng (1444991):
  • macOS: Command + K
  • Windows/Linux: Ctrl + L
• Xoá tuỳ chọn trình đơn thả xuống Recorder (Trình ghi) > Recording N (Bản ghi N) > Performance insights panel (Bảng điều khiển thông tin chi tiết về hiệu suất) (1414773).
• Các trang tính kiểu không tải được hiện bị ẩn khỏi cây điều hướng (1386059).
• Hiệu suất: Khắc phục lỗi hiển thị không chính xác của kênh Số lượt tương tác có thể mở rộng (1432510).
• Thành phần: Các trang kiểu không tải được hiện được gạch dưới bằng các đường lượn sóng (1440626).
• Trình gỡ lỗi không tự động bước vào WebAssembly khi không có trình bổ trợ cho ngôn ngữ tương ứng (1443342).
• Lối tắt di chuyển con trỏ từng từ một được khôi phục cho các tệp CSS trong Sources (Nguồn) > Editor (Trình chỉnh sửa) (1241848):
  • macOS: Alt + Mũi tên
  • Windows/Linux: Ctrl + Mũi tên

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.