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ẻ Tin 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ề 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 quy tắc @supports trong ngăn Kiểu

Giờ đây, bạn có thể xem và chỉnh sửa các quy tắc @supports trong 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 các quy tắc @supports trong ngăn Kiểu. Nhấp vào khai báo của quy tắc để chỉnh sửa.

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

Các vấn đề về Chromium: 1222574, 1222573

Cải tiến bảng điều khiển của 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 Recorder (Trình ghi) hiện tự động ưu tiên các phần tử có những 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à những bộ chọn phổ biến được dùng trong kiểm thử tự động.

Ví dụ: bắt đầu ghi lại trên 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 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 một bản ghi nếu không sử dụng các bộ chọn chung.

Ví dụ: trang minh hoạ này sử dụng thuộc tính data-automate làm bộ chọn. bắt đầu ghi lạ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

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

Đổi tên bản ghi

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

Giờ đây, bạn có thể di chuột lên một lớp hoặc hàm trong bảng 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, thẻ 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 của lớp/hàm khi di chuột

Vấn đề về Chromium: 1049947

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

Trước đây, dòng thời gian Khung hình sẽ trực quan hoá mọi khung hình có công việc bị trì hoãn trên luồng chính dưới dạng "khung hình bị bỏ qua". Tuy nhiên, có những trường hợp một số khung hình vẫn có thể tạo ra các bản cập nhật về hình ảnh (ví dụ: thao tác 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 những "Khung hình bị rớt" này vẫn phản ánh các nội dung cập nhật về hình ảnh.

"Khung hình 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 hình, nhưng vấn đề này không nghiêm trọng đến mức chặn hoàn toàn các nội dung cập nhật trực quan.

Khung hình 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ố điểm 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ị 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 iPhone OS 13_2_3. (1289553)
  • Giờ đây, bạn có thể lưu đoạn mã trực tiếp dưới dạng tệp JavaScript. Trước đây, bạn cần phải 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 sẽ hiển thị tên biến phạm vi được giảm thiểu mặc dù bản đồ nguồn được cung cấp. (1294682)
  • Giờ đây, bảng điều khiển Nguồn sẽ 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 đúng cách, 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.