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

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

Ngăn Elements (Thành phần) hiện hỗ trợ quy tắc at-rule CSS@property. Thư viện này cho phép bạn xác định rõ ràng các thuộc tính tuỳ chỉnh CSS và đăng ký các thuộc tính đó trong một tệp định kiểu mà không cần chạy JavaScript.

Để kiểm tra các thuộc tính tuỳ chỉnh đã đăng ký, trong Elements (Thành phần) > Styles (Kiểu), hãy di chuột qua tên thuộc tính và xem nội dung mô tả của thuộc tính đó trong chú giải công cụ. Trong chú giải công cụ, hãy nhấp vào đường liên kết để xem thuộc tính đã đă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ề ghi đè cục bộ

Tiếp tục chuỗi cải tiến trong phiên bản trước, tính năng ghi đè cục bộ hiện thực hiện những việc sau:

Trong Sources (Nguồn) > Page (Trang), khi bạn nhấp chuột phải vào một tệp được liên kết nguồn rồi chọn Override content (Ghi đè nội dung), DevTools sẽ hiển thị một hộp thoại đưa bạn đến nguồn gốc. 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ó ghi đè, hãy nhấp chuột phải vào tiêu đề bảng rồi chọn cột đó.
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.

Thao tác Xoá tất cả cá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 .

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 tuỳ chọn trước đó, hãy đánh dấu vào Bật "Tạm thời xoá tất cả các chế độ ghi đè" trong Cài đặt > Thử nghiệm.

Các 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 trên các tệp đã rút gọn. Khi bạn nhấp vào một kết quả tìm kiếm, kết quả đó sẽ mở tệp trong trình chỉnh sửa và hiện cuộn nội dung trùng khớp vào chế độ xem không chỉ theo chiều dọc mà còn theo chiều ngang.

Trước và sau khi tìm kiếm, bạn sẽ thấy tất cả các kết quả trùng khớp trên mỗi dòng.

Ngoài ra, Tìm kiếm cũng được cải thiện tốc độ. Hãy xem video tiếp theo để so sánh trước (bên trái) và sau (bên phải).

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.

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

Không gian làm việ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 > 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.
Cải thiện quy trình thiết lập. 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.

Hãy xem quy trình thiết lập và quy trình làm 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 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 hơn

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

In đẹp 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 bài viết Kết xuất trước các trang trong Chrome để điều hướng trang tức thì.

Vấn đề về Chromium: 1473875.

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

Chrome 118 hiện hỗ trợ tính năng đ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 web theo lựa chọn ưu tiên của người dùng để giảm độ trong suốt trong hệ điều hành, chẳng hạn như chế độ cài đặt Reduce transparency (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ẻ Rendering (Hiển thị) rồi cuộn xuống thẻ đó.

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 xoá tính năng điều hướng cũ và thêm các quy trình kiểm tra hỗ trợ tiếp cận mới, đồng thời 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 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.

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

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

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 đặt tiêu điểm vào nút Lưu bên cạnh ảnh chụp nhanh bằng phím Tab rồi nhấn phím 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.

Các vấn đề về Chromium: 1470401, 1471301, 1474108, 1468631.

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:

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).
Cập nhật màu sắc 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 Elements (Thành phần) và Performance (Hiệu suất) (1456690, 1472243).
Vấn đề hiện giữ nguyên các vấn đề về cookie trên các thao tác điều hướng (1466601).
Nhiều điểm cải tiến Application > Preloading (Ứng dụng > Tải trước), đáng chú ý nhất là 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 Trình 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 được xác định bằng tham chiếu, đối tượng không có tham chiếu loại, lọc lệnh theo kiểu khớp chuỗi con và nhiều tính năng khác (1448050).
Biểu đồ hình ngọn lửa Hiệu suất có đường viền xung quanh hộp 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ự từ 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á theo 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 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 phản hồi và yêu cầu 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 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.
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.