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

Jecelyn Yeen

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

Giờ đây, mục Group files by Authored/ Deployed (Nhóm tệp theo tác giả/Đã triển khai) sẽ xuất hiện trong trình đơn có biểu tượng 3 dấu chấm. Trước đây, chế độ này hiển thị ngay trên ngăn điều hướng.

Mở bản minh hoạ này. Bật chế độ cài đặt Nhóm tệp theo tác giả / Đã triển khai để xem mã nguồn ban đầu (Đã tạo) trước và di chuyển đến các tệp đó nhanh hơn.

Nhóm các tệp theo chế độ Đã tạo / Đã triển khai

Lỗi Chromium: 1352488

Cải thiện dấu vết ngăn xếp

Dấu vết ngăn xếp được liên kết cho các hoạt động không đồng bộ

Khi một số thao tác được lên lịch diễn ra không đồng bộ, dấu vết ngăn xếp trong Công cụ cho nhà phát triển giờ đây sẽ cho biết toàn bộ câu chuyện của thao tác đó. Trước đây, đây chỉ là một phần của câu chuyện.

Ví dụ: mở bản minh hoạ này rồi nhấp vào nút tăng. Mở rộng thông báo lỗi trong Console. Trong mã nguồn của chúng ta, hoạt động bao gồm một hoạt động timeout không đồng bộ.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Trước đây, dấu vết ngăn xếp chỉ hiển thị thao tác hết thời gian chờ. Công cụ này không cho biết "nguyên nhân gốc" của hoạt động đó.

Với những thay đổi mới nhất, Công cụ cho nhà phát triển hiện cho thấy thao tác bắt nguồn từ sự kiện onClick trong thành phần nút, sau đó là hàm increment, tiếp đến là thao tác hết thời gian chờ.

Dấu vết ngăn xếp được liên kết cho các hoạt động không đồng bộ

Trên thực tế, Công cụ cho nhà phát triển đã giới thiệu tính năng "Gắn thẻ ngăn xếp không đồng bộ" mới. Bạn có thể kể toàn bộ câu chuyện về hoạt động bằng cách liên kết cả hai phần của mã không đồng bộ với phương thức console.createTask() mới. Hãy xem bài viết Gỡ lỗi hiện đại trong Công cụ cho nhà phát triển để tìm hiểu thêm.

Nghe có vẻ phức tạp không? Không phải vậy. Trong hầu hết trường hợp, khung mà bạn đang sử dụng sẽ xử lý việc lập lịch biểu và thực thi không đồng bộ. Trong trường hợp đó, việc sử dụng API là tuỳ thuộc vào khung và bạn không cần lo lắng về việc này. (ví dụ: Angular đã triển khai những thay đổi này)

Lỗi Chromium: 1334585

Tự động bỏ qua các tập lệnh đã biết của bên thứ ba

Xác định các vấn đề trong mã của bạn nhanh hơn trong quá trình gỡ lỗi vì Giờ đây, Công cụ cho nhà phát triển tự động thêm các tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua.

Mở bản minh hoạ này rồi nhấp vào nút tăng. Mở rộng thông báo lỗi trong Console. Dấu vết ngăn xếp chỉ hiện mã của bạn (ví dụ: app.component.ts button.component.ts). Hãy nhấp vào Hiện thêm khung để xem toàn bộ dấu vết ngăn xếp.

Trước đây, dấu vết ngăn xếp bao gồm các tập lệnh của bên thứ ba như zone.js và core.mjs. Đây không phải là mã nguồn của bạn mà do các trình gói (ví dụ: webpack) hoặc khung (ví dụ: Angular) tạo ra. Mất nhiều thời gian hơn để xác định nguyên nhân gốc của lỗi.

Tự động bỏ qua các tập lệnh đã biết của bên thứ ba trong dấu vết ngăn xếp

Trong thực tế, Công cụ cho nhà phát triển bỏ qua các tập lệnh của bên thứ ba dựa trên thuộc tính x_google_ignoreList mới trong bản đồ nguồn. Khung và trình gói cần cung cấp thông tin này. Xem Nghiên cứu điển hình: Gỡ lỗi góc tốt hơn bằng Công cụ cho nhà phát triển.

(Không bắt buộc) Nếu muốn luôn xem toàn bộ dấu vết ngăn xếp, bạn có thể tắt chế độ cài đặt này thông qua phần Cài đặt > Danh sách bỏ qua > Tự động thêm các tập lệnh bên thứ ba đã biết vào danh sách bỏ qua.

Chế độ cài đặt tự động thêm các tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua

Lỗi Chromium: 1323199

Cải thiện ngăn xếp lệnh gọi trong quá trình gỡ lỗi

Với chế độ cài đặt Tự động thêm các tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua, ngăn xếp lệnh gọi giờ đây chỉ hiển thị các khung có liên quan đến mã của bạn.

Mở bản minh hoạ này và đặt điểm ngắt ở hàm increment() trong app.component.ts. Nhấp vào nút tăng trên trang để kích hoạt điểm ngắt. Ngăn xếp lệnh gọi chỉ cho thấy các khung trong mã của bạn (ví dụ: app.component.ts và button.component.ts).

Để xem tất cả các khung hình, hãy bật tuỳ chọn Hiển thị các khung có trong danh sách bỏ qua. Trước đây, Công cụ cho nhà phát triển hiển thị tất cả khung theo mặc định.

Cải thiện ngăn xếp lệnh gọi trong quá trình gỡ lỗi

Lỗi Chromium: 1352488

Đang ẩn các nguồn có trong danh sách bỏ qua trong bảng điều khiển Nguồn

Bật tính năng ẩn các nguồn có trong danh sách bỏ qua để ẩn các tệp không liên quan trong ngăn Điều hướng. Bằng cách này, bạn chỉ có thể tập trung vào mã của mình.

Mở bản minh hoạ này. Trong bảng điều khiển Sources (Nguồn). node_modules và webpack là tập lệnh bên thứ ba. Nhấp vào trình đơn có biểu tượng 3 dấu chấm rồi chọn ẩn các nguồn có trong danh sách bỏ qua để ẩn các nguồn đó khỏi ngăn.

Đang ẩn các nguồn có trong danh sách bỏ qua trong bảng điều khiển Nguồn

Lỗi Chromium: 1352488

Đang ẩn các tệp có trong danh sách bỏ qua trong trình đơn Lệnh

Với chế độ cài đặt ẩn các nguồn có trong danh sách bỏ qua, bạn có thể tìm thấy tệp nhanh hơn bằng Trình đơn lệnh. Trước đây, việc tìm kiếm các tệp trong Trình đơn lệnh sẽ trả về các tệp của bên thứ ba có thể không liên quan đến bạn.

Ví dụ: bật chế độ cài đặt ẩn các nguồn có trong danh sách bỏ qua rồi nhấp vào trình đơn có biểu tượng 3 dấu chấm. Chọn Mở tệp. Nhập "ton" để tìm các thành phần của nút. Trước đây, kết quả bao gồm các tệp từ node_modules, một trong các tệp node_modules thậm chí còn xuất hiện dưới dạng kết quả đầu tiên.

Đang ẩn các tệp có trong danh sách bỏ qua trong trình đơn Lệnh

Lỗi Chromium: 1336604

Theo dõi Lượt tương tác mới trong bảng Hiệu suất

Sử dụng kênh Tương tác mới trong bảng Hiệu suất để trực quan hoá các lượt tương tác và theo dõi các vấn đề có thể xảy ra về khả năng phản hồi.

Ví dụ: bắt đầu ghi lại hiệu suất trên trang minh hoạ này. Hãy nhấp vào một tách cà phê và dừng ghi hình. Có hai lượt tương tác xuất hiện trong kênh Lượt tương tác. Cả hai lượt tương tác đều có cùng mã, cho biết hoạt động tương tác được kích hoạt từ cùng một lượt tương tác của người dùng.

Theo dõi lượt tương tác trong bảng điều khiển Hiệu suất

Lỗi Chromium: 1347390

Bảng chi tiết về thời gian LCP trong bảng Thông tin chi tiết về hiệu suất

Giờ đây, bảng Thông tin chi tiết về hiệu suất cho thấy bảng phân tích thời gian của Nội dung lớn nhất hiển thị (LCP). Hãy sử dụng thông tin về thời gian này để hiểu và xác định cơ hội cải thiện hiệu suất LCP.

Bảng chi tiết về thời gian LCP trong bảng Thông tin chi tiết về hiệu suất

Lỗi Chromium: 1351735

Tự động tạo tên mặc định cho các bản ghi âm trong bảng điều khiển Máy ghi âm

Giờ đây, bảng điều khiển Máy ghi âm sẽ tự động đặt tên cho các bản ghi âm mới.

Tên mặc định của các bản ghi âm trong bảng điều khiển Máy ghi âm

Lỗi Chromium: 1351383

Nội dung nổi bật khác

Trước đây, Tiện ích Máy ghi âm đôi khi không xuất hiện trong bảng điều khiển Máy ghi âm. (1351416)
Giờ đây, ngăn Kiểu hiển thị một công cụ chọn màu cho thuộc tính stop-color của phần tử SVG <stop>. (1351096)
Xác định các tập lệnh gây tình trạng đơ bố cục là nguyên nhân gốc có thể dẫn đến sự thay đổi về bố cục trong bảng điều khiển Thông tin chi tiết về hiệu suất. (1343019)
Hiển thị đường dẫn quan trọng cho phông chữ LCP trên web trong bảng điều khiển Thông tin chi tiết về hiệu suất. (1350390)

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ố trong 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.