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

Jecelyn Yeen

Khởi động lại khung hình trong khi gỡ lỗi

Tính năng Khởi động lại khung hình đã trở lại! Bạn có thể chạy lại mã trước đó khi bị tạm dừng ở đâu đó trong hàm. Trước đây, tính năng này không được dùng nữa và bị xoá trong Chrome 92 do vấn đề về độ ổn định.

Trong ví dụ này, ban đầu trình gỡ lỗi bị tạm dừng tại điểm ngắt (dòng 343) gần cuối hàm toggleColorScheme. Để khởi động lại quá trình gỡ lỗi từ đầu hàm toggleColorScheme, hãy mở rộng phần Ngăn xếp lệnh gọi trong ngăn Debugger (Trình gỡ lỗi), nhấp chuột phải vào toggleColorScheme rồi chọn Restart frame (Khởi động lại khung).

Vấn đề về Chromium: 1303521

Các tuỳ chọn phát lại chậm trong bảng điều khiển Máy ghi âm

Giờ đây, bạn có thể phát lại luồng người dùng ở tốc độ chậm hơn – chậm, rất chậm và cực chậm. Những tuỳ chọn này giúp bạn quan sát rõ hơn từng bước phát lại trên màn hình.

Mở bảng điều khiển Máy ghi âm rồi bắt đầu một bản ghi mới. Sau khi quay xong, nhấp vào nút thả xuống Phát lại. Chọn một tốc độ để bắt đầu phát lại.

Vấn đề về Chromium: 1306756

Tạo tiện ích cho bảng điều khiển Máy ghi âm

Giờ đây, bạn có thể tạo hoặc cài đặt một tiện ích của Chrome để xuất tập lệnh phát lại ở định dạng mà mình yêu thích. Hãy xem tài liệu về API tiện ích Máy ghi âm để tìm hiểu cách tạo API tiện ích.

Để cài đặt một tiện ích minh hoạ, hãy làm theo các bước này được nêu trong tài liệu.

Vấn đề về Chromium: 1325751

Nhóm các tệp theo chế độ Đã tạo / Đã triển khai trong bảng điều khiển Nguồn

Bật tuỳ chọn mới Nhóm các tệp theo tác giả / Đã triển khai để sắp xếp các tệp của bạn trong bảng điều khiển Nguồn. Khi phát triển ứng dụng web bằng các khung (ví dụ: React, Angular), có thể gặp khó khăn trong việc điều hướng các tệp nguồn do các tệp rút gọn do các công cụ xây dựng (ví dụ: Webpack, Vite) tạo ra.

Khi sử dụng hộp đánh dấu này, bạn có thể nhóm các tệp thành 2 danh mục để tìm kiếm tệp nhanh hơn:

• Đã tạo. Tương tự như các tệp nguồn mà bạn xem trong IDE. Công cụ cho nhà phát triển tạo các tệp này dựa trên bản đồ nguồn (do các công cụ xây dựng của bạn cung cấp).
• Đã triển khai. Các tệp thực mà trình duyệt đọc. Thông thường, các tệp này được giảm kích thước.

Hãy thử tự mình trải nghiệm qua bản minh hoạ React này!

Vấn đề về Chromium: 960909

Theo dõi Thời gian người dùng mới trong bảng Thông tin chi tiết về hiệu suất

Biểu diễn các dấu performance.measure() trong bản ghi của bạn bằng kênh Thời gian người dùng mới trong bảng Thông tin chi tiết về hiệu suất.

Ví dụ: trang web này sử dụng phương thức performance.measure() để tính thời gian tải văn bản đã trôi qua.

Khi bạn bắt đầu đo lường lượt tải trang, kênh Thời gian người dùng sẽ xuất hiện trong bản ghi. Nhấp vào mục thời gian để xem thông tin chi tiết trên ngăn bên.

Vấn đề về Chromium: 1322808

Hiển thị vị trí được chỉ định của một phần tử

Các phần tử có rãnh trong bảng điều khiển Phần tử có huy hiệu slot mới. Khi gỡ lỗi sự cố bố cục, hãy sử dụng tính năng này để xác định phần tử ảnh hưởng nhanh hơn đến bố cục của nút.

Ví dụ này chứa các thẻ với một vài ô được đặt tên. Kiểm tra khe person-occupation của thẻ, nhấp vào huy hiệu slot bên cạnh thẻ đó để xem khe được chỉ định.

Tìm hiểu cách sử dụng các phần tử <template> và <slot> để tạo mẫu linh hoạt. Sau đó, bạn có thể dùng mẫu này để điền sẵn DOM tối của một thành phần web.

Vấn đề về Chromium: 1018906

Mô phỏng tính năng đồng thời phần cứng cho bản ghi Hiệu suất

Chế độ cài đặt Mô hình đồng thời phần cứng mới trong bảng điều khiển Hiệu suất cho phép nhà phát triển định cấu hình giá trị do navigator.hardwareConcurrency báo cáo.

Một số ứng dụng dùng navigator.hardwareConcurrency để kiểm soát mức độ song song của ứng dụng, chẳng hạn như để kiểm soát kích thước nhóm pthread của Emscripten. Với tính năng này, nhà phát triển có thể thử nghiệm hiệu suất ứng dụng của họ với các số lượng cốt lõi khác nhau.

Vấn đề về Chromium: 1297439

Xem trước giá trị không phải màu sắc khi tự động điền các biến CSS

Khi tự động hoàn thành các biến CSS, Công cụ cho nhà phát triển giờ sẽ điền một giá trị có ý nghĩa vào biến không phải màu sắc để bạn có thể xem trước loại thay đổi mà giá trị đó sẽ có trên nút.

Vấn đề về Chromium: 1285091

Xác định các khung chặn trong ngăn bộ nhớ đệm cho thao tác tiến/lùi

Ngăn Bộ nhớ đệm cho thao tác tiến/lùi trong bảng điều khiển Ứng dụng có phần khung mới để giúp bạn xác định các khung chặn có thể đang khiến trang không đủ điều kiện dùng bộ nhớ đệm bfcache.

Vấn đề về Chromium: 1288158

Cải thiện tính năng đề xuất tự động hoàn thành cho đối tượng JavaScript

Giờ đây, tính năng tự động hoàn thành cho các thuộc tính đối tượng JavaScript hiển thị dựa trên thứ tự sau:

1. Sở hữu các thuộc tính có thể liệt kê
2. Sở hữu các tài sản không liệt kê được
3. Các thuộc tính có thể liệt kê được kế thừa
4. Tài sản kế thừa không liệt kê được

Trước đây, các nhà phát triển thường gặp khó khăn hơn khi tìm các thuộc tính có liên quan vì đề xuất chỉ ưu tiên các thuộc tính riêng thay vì các thuộc tính kế thừa, đồng thời tất cả các thuộc tính kế thừa đều được ưu tiên như nhau.

Vấn đề về Chromium: 1299241

Cải tiến bản đồ nguồn

Dưới đây là một số bản sửa lỗi trên bản đồ nguồn để cải thiện trải nghiệm gỡ lỗi tổng thể:

• Các điểm ngắt hiện hoạt động trong <script> cùng dòng với các chú giải sourceURL.
• Trình gỡ lỗi hiện phân giải các biến theo phạm vi khối trong chế độ xem Scope (Phạm vi) bằng bản đồ nguồn.
• Trình gỡ lỗi hiện phân giải các biến trong các hàm mũi tên trong chế độ xem Scope (Phạm vi) bằng bản đồ nguồn.

Vấn đề về Chromium: 1329113, 1322115

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:

• Đã sửa cài đặt Tự động hoàn tất cho bảng điều khiển Nguồn. Trước đây, tính năng tự động hoàn thành luôn bật ngay cả khi bạn tắt chế độ cài đặt này. (1323286)
• Cập nhật thẻ Manifest (Tệp kê khai) trong bảng điều khiển Application (Ứng dụng) để phân tích cú pháp định dạng bảng phối màu mới nhất. (1318305)
• Cải thiện các đề xuất cho các vấn đề về việc chặn hiển thị <script async> trong bảng Thông tin chi tiết về hiệu suất. Trước đây, Công cụ cho nhà phát triển đề xuất cho add async attribute to the script tag mặc dù tập lệnh đã được đánh dấu là không đồng bộ. (1334096)
• Giờ đây, bảng điều khiển Thông tin chi tiết về hiệu suất phát hiện iframe là nguyên nhân tiềm ẩn dẫn đến việc thay đổi bố cục. Bạn có thể xem thông tin chi tiết về iframe trong ngăn Details (Chi tiết). (1328873)
• Khi mở tệp trong trình đơn Lệnh, các tệp đã tạo (tệp do bản đồ nguồn tạo) hiện được xếp hạng cao hơn để xuất hiện phía trên các tập lệnh đã triển khai có tên tương tự. (1312929)

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