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 trong quá trình gỡ lỗi

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

Trong ví dụ này, trình gỡ lỗi ban đầu tạm dừng ở điểm ngắt (dòng 343) gần cuối hàm toggleColorScheme. Để bắt đầu lại quá trình gỡ lỗi từ đầu hàm toggleColorScheme, hãy mở rộng mục Call stack (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 của Trình ghi

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 kỳ chậm. Các tuỳ chọn này giúp bạn quan sát tốt hơn từng bước phát lại trên màn hình.

Mở bảng điều khiển Recorder (Trình ghi) rồi bắt đầu ghi một bản ghi mới. Sau khi quay xong, hãy nhấp vào nút thả xuống Phát lại. Chọn 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 Trình ghi

Giờ đây, bạn có thể tạo hoặc cài đặt tiện ích Chrome để xuất tập lệnh phát lại ở định dạng mà bạn yêu thích. Hãy xem tài liệu về API tiện ích của trình ghi để tìm hiểu cách tạo một 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 tệp theo chế độ xem Đã tạo / Đã triển khai trong bảng điều khiển Nguồn

Bật tuỳ chọn Nhóm tệp theo chế độ xem Đã tạo / Đã triển khai mới để sắp xếp các tệp 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), bạn có thể gặp khó khăn khi đ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ụ bản dựng tạo ra (ví dụ: Webpack, Vite).

Với 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ác giả. 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ụ bản dựng cung cấp).
• Đã triển khai. Các tệp thực tế mà trình duyệt đọc. Thông thường, các tệp này được rút gọn.

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

Vấn đề về Chromium: 960909

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

Hãy trực quan hoá các dấu performance.measure() trong bản ghi bằng kênh Thời gian của người dùng mới trong bảng điều khiển 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 đã trôi qua khi tải văn bản.

Khi bạn bắt đầu đo lường thời gian tải trang, kênh Thời gian của 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 về mục đó trong 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 xếp trong bảng điều khiển Elements (Thành phần) có huy hiệu slot mới. Khi gỡ lỗi các vấn đề về bố cục, hãy sử dụng tính năng này để xác định phần tử ảnh hưởng đến bố cục của nút nhanh hơn.

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

Tìm hiểu cách sử dụng các phần tử <template> và <slot> để tạo một mẫu linh hoạt, sau đó có thể dùng mẫu này để điền DOM bóng 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 Hardware concurrency (Tính năng đồng thời phần cứng) mới trong bảng điều khiển Performance (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 sử dụng navigator.hardwareConcurrency để kiểm soát mức độ song song của ứng dụng, ví dụ: để kiểm soát kích thước nhóm pthread Emscripten. Với tính năng này, nhà phát triển có thể kiểm thử hiệu suất ứng dụng với nhiều số lượng lõi.

Vấn đề về Chromium: 1297439

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

Khi tự động hoàn thành các biến CSS, DevTools hiện sẽ điền giá trị có ý nghĩa vào biến không phải màu để 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 Back/forward cache (Bộ nhớ đệm lui/tiến) trong bảng điều khiển Application (Ứng dụng) có mục frames (khung) mới để giúp bạn xác định các khung chặn có thể khiến trang không đủ điều kiện sử dụng bfcache.

Vấn đề về Chromium: 1288158

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

Tính năng tự động hoàn thành cho các thuộc tính đối tượng JavaScript hiện hiển thị theo thứ tự sau:

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

Trước đây, nhà phát triển khó tìm thấy các thuộc tính có liên quan hơn vì đề xuất chỉ ưu tiên các thuộc tính riêng so với các thuộc tính kế thừa và 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

Sau đâ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> nội tuyến với chú giải sourceURL.
• Giờ đây, trình gỡ lỗi sẽ phân giải các biến trong phạm vi khối trong chế độ xem Phạm vi bằng bản đồ nguồn.
• Giờ đây, trình gỡ lỗi sẽ phân giải các biến trong hàm mũi tên trong chế độ xem Phạm vi bằng bản đồ nguồn.

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

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:

• Khắc phục chế độ cài đặt Tự động hoàn thành 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 chế độ cài đặt bị tắt. (1323286)
• Cập nhật thẻ Tệp kê khai trong bảng điều khiển Ứ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 đề chặn kết xuất <script async> trong bảng điều khiển Thông tin chi tiết về hiệu suất. Trước đây, DevTools đề xuất add async attribute to the script tag mặc dù tập lệnh đã được đánh dấu là không đồng bộ. (1334096)
• Bảng Thông tin chi tiết về hiệu suất hiện phát hiện iframe là nguyên nhân tiềm ẩn gây ra sự thay đổi bố cục. Bạn có thể xem thông tin chi tiết về iframe trong ngăn Chi tiết. (1328873)
• Khi mở tệp trong Trình đơn lệnh, các tệp do tác giả 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 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.