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 và không gian màu CSS mới sắp ra mắt trên web! Tương tự như vậy, DevTools đã ra mắt 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 Độ phân giải cao.

Ngăn 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 quy cách Màu CSS cấp 4. Hãy xem Hướng dẫn về màu CSS độ phân giải cao để hiểu rõ các lựa chọn màu có sẵn trên web.

Sau đây là ví dụ về định nghĩa màu CSS bằng color(), lch(), oklab() và color-mix(). Ví dụ về định nghĩa màu CSS.

Khi sử 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ả của hàm 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 của color(display-p3 1 0 1). Chúng tôi cũng đã thêm một đường ranh giới gam màu để phân biệt giữa gam màu sRGB và display-p3 nhằm giúp bạn hiểu rõ hơn về gam màu của màu đã chọn. Đường ranh giới gam màu.

Công cụ 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 bảng màu trong ngăn Styles (Kiểu). Chuyển đổi màu giữa các định dạng màu.

Khi chuyển đổi, điều quan trọng là bạn phải biết liệu nội dung chuyển đổi có được cắt bớt để vừa với không gian hay không. DevTools đặ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ề phần cắt này. Cảnh báo về việc cắt màu.

Ngoài ra, bạn có thể chọn màu trên màn hình bằng lối tắt mới. Nhấn phím "c" để kích hoạt công cụ chọn màu và nhấn Escape để huỷ kích hoạt công cụ này. Công cụ chọn màu chỉ lấy mẫu màu trong không gian 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 không gian màu sRGB, thì công cụ eyedropper (bộ lấy mẫu màu) sẽ cắt màu đó thành màu gần nhất trong không gian sRGB, tức là màu hồng đậm 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 nữa để nhường chỗ 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ề Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Cải thiện trải nghiệm người dùng về điểm ngắt

Ngăn Breakpoints (Điểm ngắt) được thiết kế lại cho phép bạn truy cập nhanh vào các tính năng thường dùng, cụ thể là vô hiệu hoá, chỉnh sửa và xoá điểm ngắt.

Sau đây là một số điểm nổi bật: – Cả hai tuỳ chọn ngoại lệ tạm dừng đều được chuyển sang ngăn Breakpoints (Điểm ngắt) và được gắn nhãn bằng văn bản để dễ hiểu hơn. Các tuỳ chọn tạm dừng trường hợp 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. Nhóm các điểm ngắt theo tệp.

  • Có các tuỳ chọn mới để vô hiệu hoá, xoá và chỉnh sửa điểm ngắt khi di chuột qua một điểm ngắt hoặc tệp. Các tuỳ chọn mới để huỷ kích hoạt điểm ngắt.

  • 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ại đây, bạn có thể nhập điều kiện điểm ngắt hoặc chuyển sang điểm ghi nhật ký. Hộp thoại chỉnh sửa điểm ngắt.

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

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

Phím tắt có thể tuỳ chỉnh cho Trình ghi

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

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

Bạn không nhớ phím tắt? Không sao, hãy nhấp vào nút ? để xem tất cả lối tắt bất cứ lúc nào. Lối tắt của ứ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 lối tắt của Trình ghi.

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 lại luồng người dùng, hãy sử dụng lệnh Create a new recording (Tạo bản ghi mới) trong Command Menu (Trình đơn lệnh) trong DevTools để bắt đầu. Tạo lệnh ghi mới.

Vấn đề về Chromium: 1339771

Làm nổi bật cú pháp tốt hơn cho Angular

DevTools đã cải tiến 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ễ đọc mã và nhận ra cấu trúc của mã hơn. Làm nổi bật cú pháp cho các mẫu HTML Angular.

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

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

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

Vấn đề về Chromium: 1407166

Thông tin nổi bật khác

Sau đây là một số bản 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 điều khiển Elements (Thành phần) sẽ tự động lấy nét ngay lập tức vào thành phần trùng khớ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à điểm ngắt. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
  • Để hỗ trợ gỡ lỗi hiệu quả hơn, giờ đây, Công cụ cho nhà phát triển hỗ trợ việc đánh giá biểu thức bằng các thành viên lớp riêng tư. (1381806) Đánh giá biểu thức có thành phần lớp riêng tư.

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.