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 đã thêm một cách dễ dàng và linh hoạt hơn để 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 đơ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ẽ 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ị 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ị đó rồi bắt đầu chỉnh sửa.

Các sự cố với Chromium: 1126178, 1172993

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

Giờ đây, bạn có thể ẩn một số 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 vấn đề mà bạn muốn ẩn. Nhấp vào Tuỳ 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ể cho hiện tất cả vấn đề đã ẩn hoặc một vấn đề đã chọn.

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

Vấn đề với 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:

Luôn in đậm và sắp xếp các tài sản riêng trước tiên trong bảng điều khiển Console (Bảng điều khiển), Sources (Nguồn) và ngăn Properties (Thuộc tính).
Làm phẳng các thuộc tính xuất hiện 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 Bảng điều khiển. Các tài sản riêng hiện được in đậm và được sắp xếp trước. 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 hơn, đặc biệt là đối với API web (ví dụ: URL) có nhiều thuộc tính kế thừa.

Các tài sản 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 Thuộc tính 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

Các sự cố với 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ử Thời gian hiển thị có chứa lớn nhất (LCP) 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 hình ảnh đó.

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

Kiểm tra LCP tải từng phần trong một báo cáo Lighthouse

Vấn đề với Chromium: 772558

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

Các đoạn trích trong ngăn Đoạn mã thuộc bảng điều khiển Nguồn được sắp xếp theo thứ tự bảng chữ cái. Trước đây, bảng này không được sắp xếp.

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

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

Vấn đề với Chromium: 1243976

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

Giờ đây, bạn có thể nhấp để đọc ghi chú phát hành cho 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 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 bản dịch có vấn đề, 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.

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

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

Bạn có thấy khó 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 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 điểm cải tiến cho giao diện người dùng của Trình đơn lệnh vẫn đang tiếp diễn. Hãy chú ý theo dõi để biết thêm thông tin cập nhật nhé!

Vấn đề với Chromium: 1201997

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.