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

Jecelyn Yeen

Chrome 100

Chúc mừng 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 vào thẻ Tính năng mới để ăn mừng những cột mốc này.

Như thường lệ, bạn có thể xem video mới nhất về tính năng mới trong DevTools 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 quy tắc tại @supports 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 tại 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 phần 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 Recorder (Máy ghi) hiện sẽ tự động ưu tiên các phần tử có các thuộc tính sau:

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

Các thuộc tính ở trên là bộ chọn phổ biến dùng trong quá trình tự động hoá kiểm thử.

Ví dụ: bắt đầu một bản ghi mới bằng trang minh hoạ này. Điền địa chỉ email và quan sát giá trị 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 của bản ghi

Bạn có thể tuỳ chỉnh bộ chọn của 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. Hãy bắt đầu một bản ghi mới và nhập data-automate làm thuộc tính bộ chọn. Điền địa chỉ email và quan sát giá trị bộ chọn ([data-automate=email-address]).

Đổi tên bản ghi

Giờ đây, bạn có thể đổi tên bản ghi trong bảng điều khiển Trình 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.

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

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 Nguồn trong quá trình gỡ lỗi để xem trước các thuộc tính của lớp hoặc hàm đó. Trước đây, phần này chỉ hiển thị tên hàm và đường liên kết đến vị trí của hàm trong mã nguồn.

Vấn đề về Chromium: 1049947

Khung hiện diện một phần trong bảng điều khiển Hiệu suất

Tính năng ghi lại hiệu suất hiện hiển thị một danh mục khung hình mới "Khung hình được hiển thị một phần" trong dòng thời gian Khung hình.

Trước đây, dòng thời gian Frames (Khung) hiển thị mọi khung hình có công việc bị trì hoãn trong luồng chính dưới dạng "khung hình bị bỏ lỡ". 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 các "Khung hình bị bỏ lỡ" này vẫn phản ánh nội dung cập nhật về hình ảnh.

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

Vấn đề về Chromium: 1261130

Thông tin 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 iPhone cho thiết bị được mô phỏng. Tất cả phiên bản iPhone sau phiên bản 5 đều có chuỗi user-agent với iPhone OS 13_2_3. (1289553)
• Giờ đây, bạn có thể trực tiếp lưu mã đoạn 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)
• Bảng điều khiển Sources (Nguồn) hiện 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 Sources (Nguồn) hiển thị tên biến phạm vi đã rút gọn mặc dù bạn đã cung cấp bản đồ nguồn. (1294682)
• Bảng điều khiển Nguồn hiện khôi phục chính xác 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 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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.