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 104)

Jecelyn Yeen

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

Tính năng Khởi động lại khung đã quay lại! Bạn có thể chạy lại mã trước đó khi bị tạm dừng ở vị trí nào đó trong hàm. Trước đó, 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, ban đầu trình gỡ lỗi đã tạm dừng ở đ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 Trình gỡ lỗi, nhấp chuột phải vào toggleColorScheme rồi chọn Khởi động lại khung.

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

Vấn đề với 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 kỳ chậm. Các tuỳ chọn này cho phé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 (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.

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

Vấn đề với 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 các tập lệnh phát lại theo định dạng yêu thích. Xem tài liệu về Recorder Extension API (API Tiện ích ghi âm) để tìm hiểu cách tạo một bản ghi.

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

tiện ích tuỳ chỉnh cho bảng điều khiển Máy ghi âm

Vấn đề với 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 là Nhóm tệp theo Đã tạo / Đã triển khai để sắp xếp các tệp trong bảng điều khiển Nguồn. Khi phát triển các ứng dụng web bằng 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 được giảm kích thước do các công cụ xây dựng tạo ra (ví dụ: Webpack, Vite).

Khi chọn 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 tệp nhanh hơn:

Tác giả. Tương tự như các tệp nguồn 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 tế mà trình duyệt đọc. Thông thường, những tệp này sẽ được giảm kích thước.

Hãy tự mình trải nghiệm Bản minh hoạ phản ứng này!

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

Vấn đề với 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

Trình bày trực quan các điểm performance.measure() trong bản ghi bằng kênh mới có tên User Timing (Thời gian người dùng) 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 tải trang, kênh Thời gian người dùng sẽ hiển thị trong bản ghi. Nhấp vào mục dấu thời gian để xem thông tin chi tiết trên ngăn bên.

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

Vấn đề với Chromium: 1322808

Hiển thị vị trí đã 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ử sẽ có một 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 ô đượ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 thẻ để 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 mà sau đó có thể dùng để điền DOM bóng của một thành phần web.

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

Vấn đề với Chromium: 1018906

Mô phỏng tính năng đồng thời phần cứng cho các Bản ghi âm buổi biểu diễn

Chế độ cài đặt Đồ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 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ể kiểm tra hiệu suất của ứng dụng dựa trên nhiều số lượng lõi.

Mô phỏng tính năng đồng thời phần cứng cho các Bản ghi âm buổi biểu diễn

Vấn đề với Chromium: 1297439

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

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

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

Vấn đề với Chromium: 1285091

Xác định 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 Ứng dụng có phần khung mới giúp bạn xác định những khung chặn có thể đang khiến trang không đủ điều kiện dùng bộ nhớ đệm bfcache.

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

Vấn đề với Chromium: 1288158

Cải thiện đề xuất tự động hoàn thành cho các đố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ị dựa trên thứ tự sau:

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

Trước đây, các nhà phát triển thấy khó tìm được các tài sản có liên quan vì đề xuất chỉ ưu tiên các tài sản riêng hơn so với tài sản kế thừa và tất cả các tài sản kế thừa đều có mức độ ưu tiên như nhau.

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

Vấn đề với Chromium: 1299241

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

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

Điểm ngắt hiện hoạt động trong <script> cùng dòng với chú thích sourceURL.
Trình gỡ lỗi hiện phân giải các biến trong phạm vi của 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 hàm mũi tên ở khung hiển thị Scope (Phạm vi) bằng bản đồ nguồn.

Các sự cố với Chromium: 1329113, 1322115

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:

Sửa 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 cài đặt bị tắt. (1323286)
Cập nhật thẻ Manifest 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 nội dung đề xuất cho các vấn đề chặn hiển thị <script async> trong bảng điều khiển 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 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 các iframe là nguyên nhân tiềm ẩn dẫn đến việc thay đổi bố cục. Bạn có thể xem chi tiết iframe trong ngăn Chi tiết. (1328873)
Khi mở tệp trong trình đơn Lệnh, các tệp đã tạo (các 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ự nhau. (1312929)

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.