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 theo Authored / Deployed (Tệp được nhóm theo Tác giả/Đã triển khai) xuất hiện trong trình đơn có biểu tượng 3 dấu chấm. Trước đây, thông báo 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ạo / Đã triển khai để xem mã nguồn gốc của bạn (Đã tạo) trước tiên và chuyển đến các tệp đó nhanh hơn.

Nhóm tệp theo Đã 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ố hoạt động đượ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 bạn biết toàn bộ thông tin về hoạt động đó. Trước đây, mô hình này chỉ kể một phần câu chuyện.

Ví dụ: mở bản minh hoạ này rồi nhấp vào nút tăng dần. Mở rộng thông báo lỗi trong Bảng điều khiển. Trong mã nguồn của chúng ta, thao tác này bao gồm một thao tác 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ỉ cho thấy thao tác hết thời gian chờ. Việc này không cho thấy "nguyên nhân gốc" của thao tác.

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 theo 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ộ

Trong 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ộ quy trình hoạt động bằng cách liên kết cả hai phần của mã không đồng bộ với nhau bằng 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.

Điều này có vẻ phức tạp phải 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 đó, tuỳ thuộc vào khung sử dụng API, bạn không cần phải lo lắng về vấn đề đó. (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ì Công cụ cho nhà phát triển hiệ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 dần. Mở rộng thông báo lỗi trong Bảng điều khiển. Dấu vết ngăn xếp chỉ hiển thị mã của bạn (ví dụ: app.component.ts button.component.ts). Nhấp vào Show more frame (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, chúng do các trình đóng 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

Trên 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 đóng gói cần cung cấp thông tin này. Xem Nghiên cứu điển hình: Gỡ lỗi Angular hiệu quả hơn bằng Công cụ cho nhà phát triển.

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 thông qua phần Cài đặt > Danh sách bỏ qua > 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 (không bắt buộc).

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 hiện 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 tại 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ỉ hiển thị 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ã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 hình 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 trong danh sách bỏ qua để ẩn các tệp không liên quan trong ngăn Navigation (Đ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 Nguồn. node_modules và webpack là các tập lệnh của 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 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

Ẩn các tệp trong danh sách bỏ qua trong trình đơn Lệnh

Với chế độ cài đặt ẩn các nguồn 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, thao tá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 kiếm các thành phần nút. Trước đó, 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.

Ẩn các tệp trong danh sách bỏ qua trong trình đơn Lệnh

Lỗi Chromium: 1336604

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

Sử dụng tính năng theo dõi Lượt 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 đề tiềm ẩn 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. Nhấp vào một tách cà phê và dừng ghi âm. Hai lượt tương tác sẽ 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ã nhận dạng, cho biết lượt 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 hoạt động tương tác trong bảng điều khiển Hiệu suất

Lỗi Chromium: 1347390

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

Giờ đây, bảng điều khiển Thông tin chi tiết về hiệu suất sẽ hiển thị thông tin chi tiết về thời gian của Thời gian hiển thị nội dung lớn nhất (LCP). Hãy sử dụng nhữ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 thời gian LCP trong bảng điều khiển 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 Recorder (Máy ghi âm) sẽ tự động đặt tên cho các bản ghi mới.

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

Lỗi Chromium: 1351383

Thông tin nổi bật khác

Trước đây, Tiện ích Máy ghi âm đôi khi không hiển thị trong bảng điều khiển Máy ghi âm. (1351416)
Giờ đây, ngăn Styles (Kiểu) sẽ 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 ra tình trạng bị đơ bố cục là nguyên nhân gốc có thể dẫn đến việc thay đổi 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ữ trên web LCP trong bảng 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 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.