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 95)

Jecelyn Yeen

Công cụ mới để ghi nhận độ dài CSS

Công cụ cho nhà phát triển đã bổ sung một cách dễ dàng và linh hoạt hơn để cập nhật độ dài trong CSS!

Trong ngăn 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à lưu ý rằng loại đơn vị được gạch chân. Nhấp vào đơn vị đó để 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ẽ được đổ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ị thêm 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ị đó và bắt đầu chỉnh sửa.

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

Ẩn các 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 đề mà bạn quan tâm.

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

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

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

Vấn đề về Chromium: 1175722

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

Công cụ cho nhà phát triển cải thiện khả năng hiển thị các thuộc tính bằng cách:

Trước tiên, hãy luôn in đậm và sắp xếp các thuộc tính riêng trong Bảng điều khiển, bảng điều khiển Nguồn và ngăn Tài sản.
Làm phẳng hiển thị thuộc tính trong ngăn Properties (Thuộc tính).

Ví dụ: đoạn mã dưới đây sẽ tạo một đối tượng URL link với 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 Bảng điều khiển. Các thuộc tính của riêng bạn hiện được in đậm và được sắp xếp đầu 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 riêng được in đậm và được sắp xếp trước

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

Làm phẳng tài sản

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

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

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

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ề nội dung cập nhật.

Công cụ kiểm tra LCP được tải từng phần trong một báo cáo Lighthouse

Vấn đề về Chromium: 772558

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

Đoạn trích trong ngăn Đoạn trích trên 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, dữ liệu này không được sắp xếp.

Sử dụng tính năng trích đoạn nội dung để chạy các lệnh nhanh hơn. Xem video này để biết mẹo!

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

Vấn đề về Chromium: 1243976

Liên kết mới đến ghi chú phát hành đã dịch và báo cáo lỗi dịch

Giờ đây, bạn có thể nhấp để đọc ghi chú phát hành Công cụ cho nhà phát triển 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 đề trong 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 qua phần Tuỳ chọn khác > Trợ giúp > Báo cáo lỗi dịch.

Liên kết mới đến ghi chú phát hành đã dịch và báo cáo lỗi dịch

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

Bạn có gặp khó khăn khi tìm kiếm tệp trong Trình đơn lệnh không? Tin vui cho bạn! Giao diện người dùng Trình đơn lệnh hiện đã được nâng cao!

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

Các cải tiến về giao diện người dùng của Trình đơn lệnh vẫn đang diễn ra, hãy chú ý theo dõi để biết thêm thông tin cập nhật!

Vấn đề về Chromium: 1201997

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng 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 để thảo luận về các tính năng và thay đổi mới trong bài đăng, 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 đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo vấn đề về 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 của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.