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 CSS mới sắp có trên web! Đ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 Độ phân giải cao.

Ngăn Styles (Kiểu) hiện hỗ trợ 12 hệ màu mới và 7 gam màu mới như đã nêu trong thông số kỹ thuật CSS cấp màu 4. Xem Hướng dẫn về màu sắc của CSS độ phân giải cao để 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 CSS với 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ả đầu ra màu cuối cùng trong ngăn Computed (Tính toán).kết quả phối màu trong ngăn Đã tính toán.

Công cụ chọn màu hỗ trợ tất cả các hệ 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). Thêm một đường ranh giới gam màu, phân biệt giữa các gam màu sRGB và display-p3 để hiểu rõ hơn về gam màu đã chọn.Một đườ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 Thay đổi định dạng màu để truy cập cửa sổ bật lên để chuyển đổi, hoặc chỉ cần nhấp vào 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, điều quan trọng là phải biết liệu lượt chuyển đổi đã được cắt bớt cho phù hợp với không gian hay chưa. Công cụ cho nhà phát triển đặt một biểu tượng cảnh báo bên cạnh màu được chuyển đổi để cảnh báo cho bạn về đoạ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 phím tắt mới. Nhấn "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 các 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, thì 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à đỏ 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 đã ngừng hoạt động để 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 sự cố với Chromium: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Trải nghiệm người dùng nâng cao của đ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à huỷ kích hoạt, chỉnh sửa và xoá các đ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. Tạm dừng 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 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 để 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. 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.

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.

Các sự cố với Chromium: 1407586, 1402891, 1402893

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

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 tiện lợi giúp ghi và phát lại luồng người dùng nhanh hơn.

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

Thậm chí, bạn 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 trong 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 lại quy trình của người dùng, hãy dùng lệnh 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ới Chromium: 1339771

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

Công cụ cho nhà phát triển đã cải thiệ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 đọc mã và nhận ra cấu trúc của mã dễ dàng hơn. Làm nổi bật cú pháp cho các mẫu HTML Angular.

Các sự cố với Chromium: 1385374, 1385678

Sắp xếp lại bộ nhớ đệm trong bảng điều khiển Application (Ứ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, còn ngăn Bộ nhớ đệm cho thao tác tiến/lùi được chuyển đến 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ới Chromium: 1407166

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

Dưới đây là một số sửa đổ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 cài đặt Vô hiệu hóa 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 nét ngay lập tức trên 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 giúp 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)
  • Để hỗ trợ gỡ lỗi hiệu quả hơn, Công cụ cho nhà phát triển hiện hỗ trợ đánh giá biểu thức bằng các thành phần lớp riêng tư. (1381806) Đánh giá biểu thức với các thành viên của lớp riêng tư.

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   Thêm   > 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.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59