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

Sofia Emelianova
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. Phương thức này cho phép bạn xác định rõ 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.

Các 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.

    Hộp thoại đưa bạn đến mã gốc thay vì tệp được liên kết nguồn.

  • Bảng điều khiển Network (Mạng) sẽ có cột Has overrides (Có 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 đó.

    Lọc theo giá trị "has-overrides:yes" trong cột "Có ghi đè".

  • Trong phần Sources (Nguồn) > Overrides (Ghi đè), tuỳ chọn trình đơn Delete all overrides (Xoá tất cả các chế độ ghi đè) đã được thay thế bằng tuỳ chọn Delete (Xoá) với hành vi chính xác.

    Trước và sau khi thay thế "Xoá tất cả các chế độ ghi đè" bằng "Xoá".

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 Đã lưu..

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 mà bạn đã nhấp cùng với tất cả nội dung của thư mục đó.

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

Các vấn đề về Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

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ả 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ính năng Tìm kiếm hiện hỗ trợ bỏ qua trang thông tin 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 (Nguồn) > Filesystem (Hệ thống tệp) đã được đổi tên thành Workspace (Không gian làm việc). Các văn bản giao diện người dùng trong ngăn này hiện rõ ràng hơn và không còn thừa thãi.
  • Cải thiện quy trình thiết lập. 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.

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 bạn thực hiện trong DevTools với các 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ế:

Các 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 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 importmapspeculationrules, 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.

Lighthouse 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 mới về hỗ trợ tiếp cận, đồng thời thay đổi cách tính điểm cho danh mục hỗ trợ tiếp cận.

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.

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 để di chuyển giữa các phần trong thanh 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

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:

  • 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 RegEx hiện hỗ trợ dấu cách (1346936).
  • Elements đã khắc phục tính năng phát hiện truy vấn nội dung đa phương tiệ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.

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 viết Tính năng mới trong DevTools.