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

Phần mới dành cho các thuộc tính tuỳ chỉnh trong Elements > Styles (Phần tử > Kiểu)

Giờ đây, bảng điều khiển Elements (Phần tử) hỗ trợ quy tắc@property CSS. Nền tảng 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ý 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 thuộc tính tuỳ chỉnh đã đăng ký, trong Elements (Phần tử) > Styles (Kiểu), hãy di chuột lên tên thuộc tính và xem các bộ mô tả của thuộc tính đó trong một 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.

Các vấn đề về Chromium: 1471102, 1471103, 1471105.

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

Tiếp tục chuỗi cải tiến trong phiên bản trước, các chế độ ghi đè cục bộ hiện có những điểm 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 với nguồn và chọn Override content (Ghi đè nội dung), DevTools sẽ cho thấy một hộp thoại đưa bạn đến nguồn ban đầu. Bạn 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 có một cột Có ghi đè mới và bộ lọc has-overrides:[content|headers|yes|no] tương ứng. Để xem cột Có chế độ 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 đè, lựa chọn trình đơn Xoá tất cả các chế độ ghi đè đã được thay thế bằng lựa chọn Xoá với hành vi chính xác.

  

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

Lựa chọn Xoá mới sẽ hiển thị thông báo cảnh báo và nhắc bạn 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 của thư mục đó.

Để khôi phục lựa 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 Settings (Cài đặt) > Experiments (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 cho mỗi kết quả khớp mà công cụ này tìm thấy trong một dòng mã. Trước đây, thẻ này chỉ hiển thị kết quả khớp đầu tiên cho 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 thu nhỏ. Khi bạn nhấp vào một kết quả tìm kiếm, thao tác này sẽ mở tệp trong trình chỉnh sửa và giờ đây, kết quả trùng khớp sẽ xuất hiện không chỉ theo chiều dọc mà còn theo chiều ngang.

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

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

Các vấn đề về Chromium: 1468875, 1472019.

Bảng điều khiển Nguồn được cải tiến

Không gian làm việc tinh gọ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:

• Đặt tên nhất quán. Đáng chú ý nhất là ngăn Nguồn > Hệ thống tệp đã được đổi tên thành Không gian làm việc. Giờ đây, nhiều văn bản trên giao diện người dùng trong ngăn này đã rõ ràng hơn và không còn dư thừa.
• Thiết lập được cải thiện. Xem các tín hiệu rõ ràng hơn để kéo và thả thư mục hoặc nhấp vào một đường liên kết để chọn thư mục.

Sources (Nguồn) > Workspace (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 các tệp nguồn.

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

Các vấn đề về Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Sắp xếp lại ngăn trong bảng điều khiển Nguồn

Giờ đây, bạn có thể sắp xếp lại các ngăn ở bên trái của bảng 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, 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 Nguồn có thể:

• In JavaScript nội dòng theo cách dễ đọc 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.

Để biết thêm thông tin về 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 nội dung 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 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 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.

Lighthouse 11

Giờ đây, bảng Lighthouse chạy Lighthouse 11. Đáng chú ý nhất là phiên bản này loại bỏ chế độ thao tác cũ, đồng thời thêm các quy trình kiểm tra mới về khả năng hỗ trợ tiếp cận và thay đổi cách tính điểm cho danh mục hỗ trợ tiếp cận.

Bạn cũng có thể xem danh sách đầy đủ các thay đổi. Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng 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 thiệ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 tổ hợp phím điều hướng hơn:

• Tổng quan về CSS: Sử dụng các mũi tên lên và xuống để di chuyển giữa các phần trong thanh bên trái.
• Kỷ niệm: Trong thanh bên trái, hãy dùng phím Tab để chuyển tiêu điểm đến nút Lưu bên cạnh ảnh chụp nhanh rồi nhấn phím Enter để chọn thư mục.

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

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

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

Sau đây là một số điểm cải tiến và bản sửa lỗi đá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 sắc của Material 3 trong nhiều phần tử trên giao diện người dùng, đáng chú ý nhất là trong các bảng Phần tử và Hiệu suất (1456690, 1472243).
• Vấn đề hiện giữ nguyên các vấn đề về cookie trong quá trình điều hướng (1466601).
• Nhiều điểm 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 Trình giám sát giao thức, đáng chú ý nhất là cảnh báo về đầ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á xác định trước, hỗ trợ các enum không xác định theo tham chiếu, các đối tượng không có tham chiếu kiểu, lọc các lệnh theo kết quả khớp chuỗi con, v.v. (1448050).
• Biểu đồ 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).
• Giờ đây, Nguồ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 RegEx hiện hỗ trợ khoảng trắng (1346936).
• Các phần tử đã khắc phục tính năng phát hiện truy vấn nội dung nghe nhìn cố định (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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

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

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.