Trang này được dịch bởi Cloud Translation API.

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

Jecelyn Yeen

Chrome 100

Chào mừng bạn đến với 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 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 tại quy tắc trong ngăn Kiểu

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

Xem và chỉnh sửa @supports tại quy tắc

Các sự cố với Chromium: 1222574, 1222573

Cải tiến bảng điều khiển Máy ghi âm

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, giờ đây, bảng điều khiển Máy ghi âm sẽ tự động ưu tiên các phần tử có các thuộc tính sau:

mã kiểm thử dữ liệu
kiểm tra dữ liệu
data-qa
data-cy
data-test-id
data-qa-id
kiểm tra dữ liệu

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

Ví dụ: bắt đầu 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 có data-testid được định nghĩa, nên phần tử này sẽ tự động được dùng làm bộ chọn thay vì các thuộc tính id hoặc class.

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

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 âm nếu không 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 bộ chọn. Điền địa chỉ email và quan sát giá trị bộ chọn ([data-automate=email-address]).

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

Kết quả của lựa chọn bộ chọn tuỳ chỉnh

Đổ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 đó.

Đổi tên bản ghi

Xem trước cá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 Nguồn trong khi gỡ lỗi để xem trước các thuộc tính của lớp đó. 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.

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

Vấn đề với Chromium: 1049947

Các 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 mới "Khung hình được trình bày một phần" trong dòng thời gian Frames (Khung).

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

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

"Khung hiển thị một phần" mới nhằm mục đích biểu thị 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 bày kịp thời trong khung hình, nhưng vấn đề này không nghiêm trọng đến mức chặn hoàn toàn việc cập nhật hình ảnh.

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

Vấn đề với Chromium: 1261130

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ậ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ả các phiên bản iPhone sau 5 đều có chuỗi tác nhân người dùng với iPhone OS 13_2_3. (1289553)
Giờ đây, 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 tự thêm đuôi tệp .js. (1137218)
Giờ đây, bảng điều khiển Sources (Nguồ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 đượ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 Nguồn đã khôi phục chính xác vị trí cuộn khi tải trang. Trước đó, vị trí này chưa được khôi phục chính xác, gây ra sự bất tiện trong quá trình gỡ lỗi. (1294422)

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 > 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.