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! Điều thú vị không kém là 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 sắc có độ phân giải cao.

Giờ đây, ngăn Kiểu 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 CSS Color Level 4. Hãy xem Hướng dẫn về màu CSS có độ phân giải cao để hiểu rõ các lựa chọn về màu sắc có 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 dùng hàm color-mix(), bạn có thể xem đầu ra màu cuối cùng trong ngăn Computed (Đã tính toán). kết quả color-mix trong ngăn Đã tính toán.

Bộ chọn màu hỗ trợ tất cả cá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). Đường ranh giới của gam màu cũng được thêm vào, phân biệt giữa gam màu sRGB và display-p3 để bạn hiểu rõ hơn về gam màu của màu đã chọn. Đường ranh giới của 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 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 tổ hợp phím Shift + nhấp vào một bảng màu trong ngăn Kiểu. Chuyển đổi màu giữa các định dạng màu.

Khi chuyển đổi, bạn cần biết liệu lượt chuyển đổi có bị cắ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ề việc 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 "c" để kích hoạt công cụ nhỏ giọt 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), công cụ ống nhỏ giọt 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 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.

Các 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 Điểm ngắt được thiết kế lại giúp bạn nhanh chóng truy cập vào các tính năng thường dùng, đặc biệt 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 lựa chọn tạm dừng ngoại lệ đề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 lựa chọn tạm dừng khi gặp 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 điểm ngắt theo tệp.

  • Có các lựa chọn mới để huỷ kích hoạt, 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 lựa 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ừ đâ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ụ cho nhà phát triển.

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

Phím tắt có thể tuỳ chỉnh của 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 cung cấp một số tổ hợp phím thuận tiện để ghi và phát lại luồng người dùng nhanh hơn.

Bạn không nhớ các phím tắt? Không sao cả, bạn có thể nhấp vào nút ? để xem tất cả các phím tắt bất cứ lúc nào. Các phím tắt của Máy ghi âm.

Bạn thậm chí có thể tuỳ chỉnh các lối tắt này thông qua trình đơn Cài đặt. Tuỳ chỉnh phím tắt của ứng dụng 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 lại một luồng người dùng, hãy sử dụng lệnh Tạo bản ghi mới trong 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

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

DevTools đã cải thiện tính năng làm nổi bật cú pháp cho các mẫu HTML của Angular, giúp bạn dễ dàng đọ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 Cache Storage (Bộ nhớ đệm) trong mục Storage (Bộ nhớ) của ngăn Application (Ứng dụng), trong khi ngăn Back/forward cache (Bộ nhớ đệm cho thao tác tiến/lùi) đã được chuyển đến mục Background Services (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ố điểm 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 Phần tử sẽ tự động lấy tiêu điểm ngay lập tức vào phần tử 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 tốt hơn, Công cụ cho nhà phát triển hiện hỗ trợ việc đánh giá các biểu thức bằng thành phần lớp riêng tư. (1381806) Đánh giá các biểu thức bằng các thành viê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 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.

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.