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

Jecelyn Yeen

Gỡ lỗi màu HD bằng ngăn Kiểu

Các loại màu và không gian màu CSS mới sắp ra mắt trên web! Một điều thú vị không kém là Công cụ cho nhà phát triển giới thiệu các công cụ mới để giúp nhà phát triển tạo, chuyển đổi và gỡ lỗi màu có Độ phân giải cao.

Ngăn Styles (Kiểu) hiện hỗ trợ 12 không gian màu mới và 7 gam màu mới như được nêu trong thông số kỹ thuật CSS Color Level 4 (Màu sắc CSS). Xem Hướng dẫn về màu sắc có độ phân giải cao của CSS để hiểu rõ hơn về các lựa chọn màu có trên web.

Dưới đây là ví dụ về định nghĩa màu sắc CSS bằng color(), lch(), oklab() và color-mix(). Ví dụ về định nghĩa màu sắc của CSS.

Khi dùng hàm color-mix(), bạn có thể xem kết quả màu cuối cùng trong ngăn Computed (Đã tính toán). kết quả color-mix trong ngăn Computed (Đã tính toán).

Công cụ chọn màu hỗ trợ tất cả không gian màu mới với nhiều tính năng hơn. Ví dụ: nhấp vào bảng màu color(display-p3 1 0 1). Một đường ranh giới gam màu cũng được thêm vào, giúp phân biệt giữa gam màu sRGB và display-p3 để giúp bạn hiểu rõ hơn về gam màu đã chọn. Đường ranh giới gam màu.

Công cụ cho nhà phát triển hỗ trợ chuyển đổi màu giữa các định dạng màu. Sử dụng biểu tượng Change Color Format (Thay đổi định dạng màu) để truy cập vào cửa sổ bật lên chuyển đổi, hoặc chỉ cần sử dụng Shift + nhấp vào một mẫu màu trong ngăn Styles (Kiểu). Đang chuyển đổi màu giữa các định dạng màu.

Khi chuyển đổi, điều quan trọng là phải biết liệu lượt chuyển đổi có được cắt bớt cho vừa với không gian hay không. Công cụ cho nhà phát triển sẽ đặt một biểu tượng cảnh báo bên cạnh màu đã chuyển đổi để cảnh báo bạn về hoạt động cắt này. Cảnh báo về tình trạng cắt màu.

Ngoài ra, bạn có thể chọn màu trên màn hình bằng phím tắt mới. Nhấn "c" để kích hoạt công cụ chọn màu và nhấn Escape để tắt công cụ này. Công cụ chọn màu chỉ lấy mẫu màu trong hệ màu sRGB. Ví dụ: nếu bạn cố gắng lấy mẫu màu color(display-p3 1 0 1) nằm ngoài hệ màu sRGB, công cụ chọn màu sẽ cắt màu đó thành màu gần nhất trong không gian sRGB, đó là màu đỏ tươi color(display-p3 0.92 0.2 0.97).

Kích hoạt công cụ chọn màu.

Cuối cùng, chế độ cài đặt Định dạng màu hiện không còn được dùng để tạo không gian cho định dạng màu HD mới. Ngừng sử dụng chế độ cài đặt định dạng màu.

Vấn đề với Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Trải nghiệm người dùng có điểm ngắt nâng cao

Ngăn Điểm ngắt được thiết kế lại giúp bạn truy cập nhanh vào các tính năng thường dùng, cụ thể là tắt, chỉnh sửa và xoá các điểm ngắt.

Dưới đây là một số điểm nổi bật: – Cả hai tuỳ chọn tạm dừng ngoại lệ đều được chuyển sang ngăn Điểm ngắt và được gắn nhãn bằng văn bản để giúp nội dung dễ hiểu hơn. Tạm dừng các tuỳ chọn ngoại lệ.

Các điểm ngắt được nhóm theo tệp, sắp xếp theo số dòng hoặc số cột và có thể thu gọn.
Có các tuỳ chọn mới để huỷ kích hoạt, xoá và chỉnh sửa điểm ngắt khi di chuột qua điểm ngắt hoặc tệp.
Nhấp vào nút chỉnh sửa điểm ngắt để mở trình chỉnh sửa điểm ngắt. Từ đây, bạn có thể nhập điều kiện điểm ngắt hoặc chuyển sang một điểm ghi nhật ký.

Hãy xem Tài liệu tham khảo về cách gỡ lỗi JavaScript để tìm hiểu cách gỡ lỗi bằng Công cụ cho nhà phát triển.

Vấn đề về Chromium: 1407586, 1402891, 1402893

Lối tắt cho ứng dụng Máy ghi âm có thể tuỳ chỉnh

Sử dụng phím tắt để ghi và phát lại luồng người dùng nhanh hơn.

Máy ghi âm giới thiệu một số phím tắt thuận tiện để ghi và phát lại luồng của người dùng nhanh hơn.

Bạn không nhớ các lối tắt? Không sao cả, hãy nhấp vào nút ? để xem tất cả phím tắt bất cứ lúc nào. Lối tắt cho ứng dụng Máy ghi âm.

Bạn thậm chí có thể tuỳ chỉnh các phím tắt này thông qua trình đơn Cài đặt. Tuỳ chỉnh phím tắt Máy ghi âm.

Nếu bạn đang làm việc trong một bảng điều khiển khác và muốn bắt đầu ghi luồng người dùng, hãy sử dụng lệnh Create a new record (Tạo bản ghi mới) trên Trình đơn lệnh trong Công cụ cho nhà phát triển để bắt đầu. Tạo một lệnh ghi mới.

Vấn đề về Chromium: 1339771

Cải thiện tính năng làm nổi bật cú pháp cho Angular

Công cụ cho nhà phát triển đã nâng cao tính năng làm nổi bật cú pháp cho các mẫu HTML Angular, giúp bạn dễ dàng đọc mã và nhận diện cấu trúc của mã.

Vấn đề về Chromium: 1385374, 1385678

Sắp xếp lại bộ nhớ đệm trong bảng điều khiển Application

Giờ đây, bạn có thể tìm thấy ngăn Cache Storage (Bộ nhớ đệm) trong phần Storage (Bộ nhớ) của bảng điều khiển Application (Ứng dụng), trong khi ngăn Back/lùi cache (Bộ nhớ đệm cho thao tác tiến/lùi) đã được chuyển sang phần Background Services (Dịch vụ nền). Bộ nhớ đệm trong bảng điều khiển Application (Ứng dụng).

Vấn đề về Chromium: 1407166

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi đáng chú ý trong bản phát hành này:

Công cụ cho nhà phát triển đã được cập nhật để tuân theo chế độ cài đặt Tắt bộ nhớ đệm khi tải bản đồ nguồn. (1407084)
Giờ đây, bảng Phần tử sẽ tự động lấy nét ngay lập tức cho phần tử phù hợp đầu tiên trong kết quả tìm kiếm. (1381853)
Nhiều bản sửa lỗi để cải thiện độ tin cậy của bản đồ nguồn và các điểm ngắt. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
Để tạo điều kiện gỡ lỗi tốt hơn, Công cụ cho nhà phát triển hiện đã hỗ trợ việc đánh giá biểu thức với các thành phần của lớp riêng tư. (1381806)

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 cứ 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ố trong 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.