Tính năng mới trong Công cụ cho nhà phát triển (Chrome 100)

Jecelyn Yeen

Chrome 100

Đây là phiên bản Chrome thứ 100! Công cụ của Chrome cho nhà phát triển sẽ tiếp tục cung cấp các công cụ đáng tin cậy để nhà phát triển xây dựng trên web. Hãy dành chút thời gian nhấp chuột trong thẻ Tính năng mới để ăn mừng các cột mốc.

Như thường lệ, bạn có thể xem video Có gì mới trong Công cụ cho nhà phát triển bằng cách nhấp vào hình ảnh.

Xem và chỉnh sửa @supports theo các quy tắc trong ngăn Kiểu

Giờ đây, bạn có thể xem và chỉnh sửa các quy tắc @supports của CSS trong ngăn Kiểu. Những thay đổi này giúp bạn dễ dàng thử nghiệm các quy tắc theo thời gian thực. Mở trang minh hoạ này, kiểm tra phần tử <div class=”box”>, xem quy tắc @supports trong ngăn Kiểu. Nhấp vào nội dung khai báo của quy tắc để chỉnh sửa.

Vấn đề về Chromium: 1222574, 1222573

Cải tiến bảng điều khiển Trình ghi

Hỗ trợ các bộ chọn phổ biến theo mặc định

Khi xác định một bộ chọn duy nhất trong quá trình ghi, bảng điều khiển Máy ghi âm giờ đây sẽ tự động ưu tiên các phần tử có các thuộc tính sau:

• data-testid
• data-test
• chất lượng dữ liệu
• hệ thống dữ liệu
• data-test-id
• mã-qa-dữ-liệu
• data-testing

Các thuộc tính nêu trên là những bộ chọn phổ biến được dùng trong quá trình tự động hoá thử nghiệm.

Ví dụ: bắt đầu bản ghi mới với trang minh hoạ này. Điền địa chỉ email và quan sát giá trị của bộ chọn.

Vì phần tử email đã xác định data-testid nên phần tử này sẽ tự động được dùng làm bộ chọn thay cho thuộc tính id hoặc class.

Tuỳ chỉnh bộ chọn bản ghi âm

Bạn có thể tuỳ chỉnh bộ chọn của một bản ghi nếu không sử dụng bộ chọn phổ biến.

Ví dụ: trang minh hoạ này sử dụng thuộc tính data-automate làm bộ chọn. bắt đầu bản ghi mới rồi nhập data-automate làm thuộc tính của bộ chọn. Điền địa chỉ email và quan sát giá trị của bộ chọn ([data-automate=email-address]).

Đổi tên bản ghi

Giờ đây, bạn có thể đổi tên một bản ghi âm trong bảng điều khiển Máy ghi âm bằng nút chỉnh sửa (biểu tượng bút chì) bên cạnh tiêu đề của bản ghi âm.

Xem trước thuộc tính lớp/hàm khi di chuột

Giờ đây, bạn có thể di chuột qua một lớp hoặc hàm trong bảng điều khiển Sources (Nguồn) trong khi gỡ lỗi để xem trước các thuộc tính của lớp hoặc hàm đó. Trước đây, hàm này chỉ hiển thị tên hàm và một đường liên kết đến vị trí của hàm trong mã nguồn.

Vấn đề về Chromium: 1049947

Khung được trình bày một phần trong bảng điều khiển Hiệu suất

Giờ đây, bản ghi hiệu suất sẽ hiển thị danh mục khung hình mới là "Khung được trình bày một phần" trong tiến trình Khung.

Trước đây, dòng thời gian Khung sẽ trực quan hoá mọi khung hình có hoạt động của luồng chính bị trễ dưới dạng "khung hình bị bỏ". Tuy nhiên, có những trường hợp mà một số khung hình vẫn có thể cập nhật hình ảnh (ví dụ: cuộn) do luồng của trình tổng hợp điều khiển.

Điều này khiến người dùng nhầm lẫn vì ảnh chụp màn hình của những "Khung hình bị rớt" này vẫn phản ánh những hình ảnh cập nhật.

"Khung được trình bày một phần" mới để chỉ ra một cách trực quan hơn rằng mặc dù một số nội dung không được trình chiếu kịp thời trong khung hình, nhưng vấn đề không nghiêm trọng đến mức chặn hoàn toàn bản cập nhật hình ảnh.

Vấn đề về Chromium: 1261130

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ập nhật chuỗi tác nhân người dùng của iPhone cho các thiết bị được mô phỏng. Tất cả các phiên bản iPhone sau phiên bản 5 đều có chuỗi tác nhân người dùng với hệ điều hành iPhone 13_2_3. (1289553)
• Bây giờ, bạn có thể lưu trực tiếp đoạn mã dưới dạng tệp JavaScript. Trước đây, bạn cần thêm đuôi tệp .js theo cách thủ công. (1137218)
• Giờ đây, bảng điều khiển Sources (Nguồn) sẽ hiển thị chính xác tên biến phạm vi khi gỡ lỗi bằng bản đồ nguồn. Trước đây, bảng điều khiển Nguồn hiển thị tên biến phạm vi được rút gọn mặc dù bản đồ nguồn đã được cung cấp. (1294682)
• Giờ đây, bảng điều khiển Sources (Nguồn) sẽ khôi phục đúng vị trí cuộn khi tải trang. Trước đó, vị trí này đã không được khôi phục chính xác gây bất tiện khi gỡ lỗi. (1294422)

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 kỳ 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ố 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.

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.