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 tại 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 với 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 các quy tắc tại @supports trong ngăn Styles (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

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

Cải tiến bảng điều khiển của 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, 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
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

Tuỳ chỉnh bộ chọn của bản ghi

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

Đổi tên bản ghi âm

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.

Đổi tên bản ghi âm

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.

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

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ó một số trường hợp một số khung hình vẫn có thể tạo ra nội dung cập nhật hình ảnh (ví dụ: cuộn) do luồng trình kết 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.

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

Vấn đề về Chromium: 1261130

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

Sau đây là một số bản 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 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 đồ nguồn được cung cấp. (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 đây, vị trí không được khôi phục chính xác gây bất tiện trong quá trình 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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.