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

Jecelyn Yeen

Công cụ tạo độ dài CSS mới

DevTools đã thêm một cách dễ dàng hơn nhưng linh hoạt để cập nhật độ dài trong CSS!

Trong ngăn Styles (Kiểu), hãy tìm bất kỳ thuộc tính CSS nào có độ dài (ví dụ: height, padding).

Di chuột qua loại đơn vị và để ý loại đơn vị được gạch chân. Nhấp vào mục này để chọn một loại đơn vị trong trình đơn thả xuống.

Di chuột qua giá trị đơn vị và con trỏ chuột sẽ thay đổi thành con trỏ ngang. Kéo theo chiều ngang để tăng hoặc giảm giá trị. Để điều chỉnh giá trị theo mức 10, hãy giữ phím Shift khi kéo.

Bạn vẫn có thể chỉnh sửa giá trị đơn vị dưới dạng văn bản — chỉ cần nhấp vào giá trị đó rồi bắt đầu chỉnh sửa.

Vấn đề về Chromium: 1126178, 1172993

Ẩn vấn đề trong thẻ Vấn đề

Giờ đây, bạn có thể ẩn các vấn đề cụ thể trong thẻ Vấn đề để chỉ tập trung vào những vấn đề quan trọng với bạn.

Trong thẻ Vấn đề, hãy di chuột qua vấn đề mà bạn muốn ẩn. Nhấp vào Tuỳ chọn khác   Thêm   > Ẩn các vấn đề như thế này.

Ẩn trình đơn sự cố

Tất cả vấn đề ẩn sẽ được thêm vào ngăn Hidden issues (Vấn đề ẩn). Mở rộng ngăn. Bạn có thể hiện tất cả hoặc một sự cố đã ẩn.

Ngăn các vấn đề đã ẩn

Vấn đề về Chromium: 1175722

Cải thiện chế độ hiển thị cơ sở lưu trú

DevTools cải thiện khả năng hiển thị các thuộc tính bằng cách:

  • Luôn in đậm và sắp xếp các thuộc tính của riêng bạn trước tiên trong bảng điều khiển Console (Bảng điều khiển), bảng điều khiển Sources (Nguồn) và ngăn Properties (Thuộc tính).
  • Làm phẳng chế độ hiển thị thuộc tính trong ngăn Properties (Thuộc tính).

Ví dụ: đoạn mã dưới đây tạo một đối tượng URL link có 2 thuộc tính riêng: user và access, đồng thời cập nhật giá trị của một thuộc tính kế thừa search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Hãy thử ghi nhật ký link trong Console. Các thuộc tính của riêng bạn hiện được in đậm và được sắp xếp trước tiên. Những thay đổi này giúp bạn dễ dàng phát hiện các thuộc tính tuỳ chỉnh, đặc biệt là đối với API web (ví dụ: URL) có nhiều thuộc tính kế thừa.

Các thuộc tính của riêng bạn được in đậm và được sắp xếp trước tiên

Ngoài những thay đổi này, các thuộc tính trong ngăn Properties (Thuộc tính) hiện cũng được làm phẳng để mang lại trải nghiệm gỡ lỗi thuộc tính DOM tốt hơn, đặc biệt là đối với Thành phần web.

Làm phẳng thuộc tính

Vấn đề về Chromium: 1076820, 1119900

Lighthouse 8.4 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse hiện đang chạy Lighthouse 8.4. Giờ đây, Lighthouse sẽ phát hiện xem phần tử Largest Contentful Paint (LCP) (Thời gian hiển thị nội dung lớn nhất) có phải là hình ảnh tải từng phần hay không và đề xuất xoá thuộc tính loading khỏi phần tử đó.

Hãy xem bài viết Tính năng mới trong Lighthouse 8.4 để biết thêm thông tin chi tiết về các bản cập nhật.

Quy trình kiểm tra LCP tải lười trong báo cáo Lighthouse

Vấn đề về Chromium: 772558

Sắp xếp đoạn mã trong bảng điều khiển Nguồn

Các mảnh mã trong ngăn Mảnh mã trong bảng điều khiển Nguồn hiện được sắp xếp theo thứ tự bảng chữ cái. Trước đây, danh sách này không được sắp xếp.

Sử dụng tính năng đoạn mã để chạy các lệnh nhanh hơn. Hãy xem video này để biết mẹo!

Sắp xếp đoạn mã trong bảng điều khiển Nguồn

Vấn đề về Chromium: 1243976

Đường liên kết mới đến ghi chú phát hành đã dịch và báo cáo lỗi bản dịch

Giờ đây, bạn có thể nhấp để đọc ghi chú phát hành của DevTools bằng 6 ngôn ngữ khác: Tiếng Nga, Tiếng Trung, Tiếng Tây Ban Nha, Tiếng Nhật, Tiếng Bồ Đào Nha và Tiếng Hàn thông qua thẻ Tính năng mới.

Kể từ Chrome 94, bạn có thể đặt ngôn ngữ ưu tiên trong Công cụ cho nhà phát triển. Nếu bạn phát hiện vấn đề về bản dịch, hãy giúp chúng tôi cải thiện bằng cách báo cáo vấn đề về bản dịch thông qua phần Tuỳ chọn khác > Trợ giúp > Báo cáo lỗi bản dịch.

Đường liên kết mới đến ghi chú phát hành đã dịch và báo cáo lỗi bản dịch

Vấn đề về Chromium: 1246245, 1245481

Cải thiện giao diện người dùng cho trình đơn lệnh DevTools

Bạn có gặp khó khăn khi tìm tệp trong Trình đơn lệnh không? Tin vui cho bạn là giao diện người dùng của Command Menu (Trình đơn lệnh) hiện đã được nâng cao!

Mở Command Menu (Trình đơn lệnh) để tìm tệp bằng phím tắt Control+P trong Windows và Linux hoặc Command+P trong MacOS.

Chúng tôi vẫn đang tiếp tục cải thiện giao diện người dùng của Trình đơn lệnh. Hãy chú ý theo dõi để biết thêm thông tin cập nhật!

Trình đơn lệnh

Vấn đề về Chromium: 1201997

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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.