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 118)

Sofia Emelianova

Mục mới cho các thuộc tính tuỳ chỉnh trong phần Phần tử > Kiểu

Bảng điều khiển Phần tử hiện đã hỗ trợ Quy tắc CSS@thuộc tính. Tính năng này cho phép bạn xác định các thuộc tính tuỳ chỉnh của CSS một cách rõ ràng và đăng ký chúng trong một biểu định kiểu mà không cần chạy bất kỳ JavaScript nào.

Để kiểm tra các tài sản tuỳ chỉnh đã đăng ký, trong mục Phần tử > Kiểu, hãy di chuột qua tên tài sản và xem thông tin mô tả của tài sản đó trong phần chú thích. Trong chú thích, hãy nhấp vào đường liên kết để xem tài sản đã đăng ký trong mục @property có thể thu gọn.

Vấn đề về Chromium: 1471102, 1471103, 1471105.

Các điểm cải tiến khác về chế độ ghi đè cục bộ

Tiếp tục luồng cải tiến trong phiên bản trước, ghi đè cục bộ giờ đây sẽ thực hiện những việc sau:

Trong Nguồn > Trang, khi bạn nhấp chuột phải vào một tệp được ánh xạ nguồn rồi chọn Ghi đè nội dung, Công cụ cho nhà phát triển sẽ hiển thị hộp thoại đưa bạn đến nguồn ban đầu. Không thể ghi đè nội dung của các tệp được ánh xạ nguồn.
Bảng điều khiển Mạng sẽ có cột Có cơ chế ghi đè mới và bộ lọc has-overrides:[content|headers|yes|no] tương ứng. Để xem cột Có phần ghi đè, hãy nhấp chuột phải vào tiêu đề bảng rồi chọn tiêu đề đó.
Trong Nguồn > Ghi đè, tuỳ chọn trình đơn Xoá tất cả cơ chế ghi đè đã được thay thế bằng tuỳ chọn Xoá bằng hành vi chính xác.

Yêu cầu Xoá tất cả nội dung ghi đè trước đây gây nhầm lẫn vì thao tác này chỉ xoá các chế độ ghi đè đang hoạt động trong phiên hiện tại, được đánh dấu bằng biểu tượng dấu chấm màu tím .

Tùy chọn Xoá mới, trước tiên sẽ hiển thị một thông báo cảnh báo và lời nhắc xác nhận, sau đó xoá thư mục bạn đã nhấp vào cùng với tất cả nội dung trong đó.

Để khôi phục lựa chọn trước đó, hãy đánh dấu vào Bật chế độ "Tạm thời xoá tất cả chế độ ghi đè" trong Cài đặt > Thử nghiệm.

Vấn đề về Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Tìm kiếm nâng cao

Giờ đây, kết quả Tìm kiếm sẽ hiển thị một mục nhập cho tất cả các kết quả trùng khớp tìm thấy trong một dòng mã. Trước đây, tính năng này chỉ hiển thị kết quả trùng khớp đầu tiên trên mỗi dòng mã. Hành vi mới này đặc biệt hữu ích khi bạn tìm kiếm trong các tệp được rút gọn. Khi nhấp vào một kết quả tìm kiếm, bạn sẽ mở tệp trong trình chỉnh sửa và cuộn kết quả trùng khớp vào chế độ xem không chỉ theo chiều dọc mà còn theo chiều ngang.

Phần trước và sau khi tìm kiếm hiển thị tất cả kết quả trùng khớp trên mỗi dòng.

Ngoài ra, tốc độ của Tìm kiếm cũng tăng lên. Xem phép so sánh trước (trái) và sau (phải) trong video tiếp theo.

Cuối cùng, Tìm kiếm hiện hỗ trợ danh sách bỏ qua và sẽ không hiển thị cho bạn kết quả từ các tệp bị bỏ qua.

Vấn đề về Chromium: 1468875, 1472019.

Bảng điều khiển Nguồn được cải thiện

Không gian làm việc tinh giản trong bảng điều khiển Nguồn

Chúng tôi mới tinh giản tính năng không gian làm việc trong bảng điều khiển Nguồn:

Đặt tên nhất quán. Đáng chú ý nhất là ngăn Sources > Filesystem (Nguồn > Hệ thống tệp) đã được đổi tên thành Workspace. Nhiều văn bản giao diện người dùng trong ngăn này giờ đây rõ ràng hơn và không bị dư thừa.
Thiết lập được cải tiến. Xem gợi ý tốt hơn về kéo và thả thư mục hoặc nhấp vào liên kết để chọn thư mục.

Nguồn > Không gian làm việc cho phép bạn đồng bộ hoá trực tiếp các thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển với tệp nguồn.

Xem cách thiết lập và quy trình công việc mới trong thực tế:

Vấn đề về Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Sắp xếp lại các ngăn trong Nguồn

Giờ đây, bạn có thể sắp xếp lại các ngăn ở bên trái bảng điều khiển Sources (Nguồn) bằng cách kéo và thả, tương tự như cách bạn có thể sắp xếp lại các bảng điều khiển, thẻ và ngăn khác.

Vấn đề về Chromium: 1473758.

Làm nổi bật cú pháp và in đẹp cho nhiều loại tập lệnh khác

Giờ đây, bảng điều khiển Sources (Nguồn) có thể:

Tạo bản in đẹp cho JavaScript cùng dòng trong các loại tập lệnh sau: module, importmap, speculationrules.
Làm nổi bật cú pháp của loại tập lệnh importmap và speculationrules, cả hai đều chứa JSON.

Trước và sau khi in đẹp và làm nổi bật cú pháp của loại tập lệnh quy tắc suy đoán.

Để biết thêm thông tin về các quy tắc suy đoán, hãy xem Các trang kết xuất trước trong Chrome để điều hướng trang tức thì.

Vấn đề về Chromium: 1473875.

Mô phỏng tính năng nội dung đa phương tiện prefers-reduced-transparency

Chrome 118 hiện hỗ trợ tính năng nghe nhìn prefers-reduced-transparency. Tính năng này cho phép nhà phát triển điều chỉnh nội dung trên web cho phù hợp với lựa chọn ưu tiên do người dùng chọn để giảm độ trong suốt của hệ điều hành, chẳng hạn như chế độ cài đặt Giảm độ trong suốt trên macOS.

Để mô phỏng tính năng đa phương tiện này, hãy mở thẻ Kết xuất rồi di chuyển xuống.

Vấn đề về Chromium: 1424879.

Ngọn hải đăng 11

Bảng điều khiển Lighthouse hiện chạy Lighthouse 11. Đáng chú ý nhất là phiên bản này loại bỏ chức năng điều hướng cũ và bổ sung các bước kiểm tra mới về khả năng hỗ trợ tiếp cận cũng như thay đổi cách tính điểm danh mục hỗ trợ tiếp cận.

Ngoài ra, hãy xem danh sách đầy đủ các thay đổi. Để tìm hiểu thông tin 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.

Cải tiến về khả năng hỗ trợ tiếp cận

Công cụ cho nhà phát triển hiện hỗ trợ thêm nhiều tổ hợp phím điều hướng:

Tổng quan về CSS: Sử dụng mũi tên lên và xuống để điều hướng các phần trong thanh bên bên trái.
Bộ nhớ: Trong thanh bên trái, hãy lấy tiêu điểm nút Lưu bên cạnh ảnh chụp nhanh bằng Tab rồi nhấn Enter để chọn thư mục.

Ngoài ra, một số vấn đề về thông báo của trình đọc màn hình đã được khắc phục.

Vấn đề về Chromium: 1470401, 1471301, 1474108, 1468631.

Nội dung 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:

Mạng: Biểu tượng mới cho các loại tài nguyên phổ biến: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Màu sắc cập nhật thành màu Material 3 trong nhiều thành phần trên giao diện người dùng, đáng chú ý nhất là trong bảng điều khiển Phần tử và Hiệu suất (1456690, 1472243).
Giờ đây, mục Vấn đề sẽ giữ lại các vấn đề về cookie trên các thành phần điều hướng (1466601).
Nhiều điểm cải tiến cho Ứng dụng > Tải trước, đáng chú ý nhất là các lưới có thể sắp xếp và thông tin chi tiết về bộ quy tắc được sửa đổi (1410709).
Có nhiều điểm cải tiến của trình chỉnh sửa lệnh trong phần Giám sát giao thức, đáng chú ý nhất là cảnh báo về dữ liệu đầu vào không chính xác, chỉnh sửa lệnh đã gửi, trình chỉnh sửa cho các tham số đối tượng không có khoá được xác định trước, hỗ trợ enum không xác định bằng tham chiếu, đối tượng không có tham chiếu loại, lệnh lọc theo chuỗi con trùng khớp và nhiều cải tiến khác (1448050).
Biểu đồ hình ngọn lửa về hiệu suất có đường viền xung quanh ô tổng trên biểu đồ hình tròn (1470147).
Nguồn hiện không coi dấu gạch ngang là ký tự chữ trong CSS (1471354).
Giờ đây, tính năng tự động hoàn thành luôn sắp xếp các từ khoá phù hợp với CSS ở cuối.
Bộ lọc biểu thức chính quy hiện hỗ trợ dấu cách (1346936).
Phần tử khắc phục tính năng phát hiện truy vấn nội dung nghe nhìn (1472693).

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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

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 cứ 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 phản hồi cho chúng tôi qua 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 > Trợ giúp > Báo cáo vấn đề về 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 của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.