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 để tạo độ dài CSS

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

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

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

Di chuột lên giá trị đơn 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ị đó và bắt đầu chỉnh sửa.

Các 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 đối với bạn.

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 đề tương tự.

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

Vấn đề về Chromium: 1175722

Cải thiện cách hiển thị các thuộc tính

DevTools cải thiện cách 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 của riêng bạn trước tiên trong Bảng điều khiển, bảng Nguồn và ngăn Thuộc tính.
• Làm phẳng màn hình 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 được 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 thuộc sở hữu của bạn hiện được in đậm và 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, đặc biệt là đối với API Web (ví dụ: URL) có nhiều thuộc tính được kế thừa.

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 đơn giản hoá để 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 Web components (Thành phần web).

Các vấn đề về Chromium: 1076820, 1119900

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

Bảng Lighthouse hiện đang chạy Lighthouse 8.4. Giờ đây, Lighthouse sẽ phát hiện xem phần tử Nội dung lớn nhất hiển thị (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 phần tử đó.

Hãy xem bài viết Điểm 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.

Vấn đề về Chromium: 772558

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

Giờ đây, đoạn mã trong ngăn Đoạn mã thuộc ngăn Nguồ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!

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 dịch

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

Bạn có gặp khó khăn khi tìm kiếm một 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 cải tiến!

Mở Trình đơn lệnh để tìm kiếm một 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!

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 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.
• Để lại 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 về 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.