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 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ợ @property CSS theo quy tắc. Thao tác này cho phép bạn xác định rõ ràng thuộc tính tùy chỉnh CSS và đăng ký chúng trong biểu định kiểu mà không cần chạy bất kỳ JavaScript nào.

Để kiểm tra các thuộc tính tuỳ chỉnh đã đăng ký, trong Phần tử > Kiểu, hãy di chuột qua tên thuộc tính và xem phần mô tả tương ứng trong phần chú thích. Trong chú giải công cụ, 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.

Các sự cố với Chromium: 1471102, 1471103, 1471105.

Cải tiến thêm tính năng ghi đè cục bộ

Tiếp tục luồng cải tiến trong phiên bản trước, chế độ ghi đè cục bộ giờ đây sẽ thực hiện những thao tá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 và 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 tệp được liên kết với nguồn.
Bảng điều khiển Mạng có một cột Có ghi đè mới và một bộ lọc has-overrides:[content|headers|yes|no] tương ứng. Để xem cột Đã 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 đè, lựa chọn trình đơn Xoá tất cả phần ghi đè đã được thay thế bằng lựa chọn Xoá có hành vi chính xác.

Chế độ Xoá tất cả chế độ ghi đè trước gây nhầm lẫn vì 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 .

Tuỳ chọn Delete (Xoá) mới, trước tiên sẽ hiển thị thông báo cảnh báo và 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 chọn Bật chế độ "Tạm thời xoá tất cả chế độ ghi đè" trong Cài đặt > Thử nghiệm.

Các sự cố với Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Tìm kiếm nâng cao

Kết quả Tìm kiếm hiện hiển thị một mục trên tất cả kết quả khớp với kết quả tìm thấy trong một dòng mã. Trước đây, trang này chỉ cho thấy 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 trên các tệp đã giảm kích thước. Khi bạn nhấp vào một kết quả tìm kiếm, tệp sẽ được mở trong trình chỉnh sửa và cuộn kết quả trùng khớp vào khung hiển thị không chỉ theo chiều dọc mà còn cả chiều ngang.

Trước và sau khi thực hiện tìm kiếm sẽ hiển thị tất cả kết quả phù hợp trên mỗi dòng.

Ngoài ra, tốc độ của chức năng Tìm kiếm cũng được tăng cường. Xem bảng 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ợ tính năng bỏ qua trang thông tin và sẽ không hiện cho bạn kết quả từ các tệp bị bỏ qua.

Các sự cố với Chromium: 1468875, 1472019.

Cải tiến bảng điều khiển Nguồn

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

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

Đặt tên nhất quán. Đáng chú ý nhất là ngăn Sources (Nguồn) > Filesystem (Hệ thống tệp) được đổi tên thành Workspace. Nhiều văn bản trên giao diện người dùng trong ngăn này hiện đã rõ ràng hơn và không bị thừa.
Cải tiến quy trình thiết lập. Xem các gợi ý tốt hơn để kéo và thả thư mục hoặc nhấp vào đường 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 làm việc mới trong thực tế:

Các sự cố với 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 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.

Các sự cố với Chromium: 1473758.

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

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

In 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 các 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 phần Trang kết xuất trước trong Chrome để điều hướng trang tức thì.

Vấn đề với 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 nội dung đa phương tiệ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 trong 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ẻ Hiển thị rồi cuộn xuống.

Vấn đề với 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ỏ cách đ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 cho 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.

Sự cố 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 thao tác nhấn phím điều hướng:

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

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

Các sự cố với Chromium: 1470401, 1471301, 1474108, 1468631.

Thông tin nổi bật khác

Dưới đây là một số bản 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ủa Material 3 được cập nhật 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 Elements (Thành phần) và Performance (Hiệu suất) (1456690, 1472243).
Vấn đề hiện giữ lại các vấn đề về cookie trên các thao tác điều hướng (1466601).
Nhiều cải tiến về Ứ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 đã sửa đổi (1410709).
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 sai dữ liệu đầu vào, chỉnh sửa lệnh đã gửi, trình chỉnh sửa tham số đối tượng không có khoá được xác định trước, hỗ trợ enum không xác định theo tham chiếu, đối tượng không có tham chiếu loại, lọc lệnh theo chuỗi con trùng khớp và nhiều tính năng khác (1448050).
Biểu đồ ngọn lửa hiệu suất có đường viền xung quanh hộp tổng cộ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ự từ trong CSS (1471354).
Giờ đây, tính năng Tự động hoàn thành sẽ luôn sắp xếp các từ khoá dựa trên CSS ở cuối.
Bộ lọc biểu thức chính quy hiện hỗ trợ dấu cách (1346936).
Khắc phục lỗi phát hiện tính năng truy vấn nội dung nghe nhìn phần tử (1472693).

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc 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 phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.