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

Jecelyn Yeen

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

Giờ đây, Group files by Authored/Deployed (Nhóm các 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ạo / Triển khai để xem mã nguồn ban đầu (Tạo) trước và chuyển đến các tệp đó nhanh hơn.

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 DevTools hiện sẽ cho biết "toàn bộ câu chuyện" về 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ờ. Báo cáo không cho thấy "nguyên nhân gốc rễ" của thao tác.

Với những thay đổi mới nhất, DevTools 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ờ.

Trong quá trình phát triển, DevTools đã ra mắt một tính năng mới là "Gắn thẻ ngăn xếp không đồng bộ". Bạn có thể kể toàn bộ câu chuyện về thao tác này 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.

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 bạn đang sử dụng sẽ xử lý việc lên lịch và thực thi không đồng bộ. Trong trường hợp đó, khung sẽ quyết định sử dụng API, bạn không cần phải lo lắng về vấn đề này. (ví dụ: Angular đã triển khai các 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 vấn đề trong mã nhanh hơn trong quá trình gỡ lỗi vì giờ đây, Công cụ cho nhà phát triển sẽ 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 thị mã của bạn (ví dụ: app.component.ts button.component.ts). 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à là mã do trình đóng gói (ví dụ: webpack) hoặc khung (ví dụ: Angular) tạo. Mất nhiều thời gian hơn để xác định nguyên nhân gốc của lỗi.

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 kết hợp 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 DevTools.

(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.

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 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 gia 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ả khung, hãy bật tuỳ chọn Hiện 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.

Lỗi Chromium: 1352488

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

Bật tuỳ chọn hide ignore-listed sources (ẩ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 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 Sources (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.

Lỗi Chromium: 1352488

Ẩ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 trong danh sách bỏ qua, bạn có thể tìm thấy tệp của mình nhanh hơn bằng Trình đơn lệnh. Trước đây, việc tìm kiếm 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ụ: hãy bật chế độ cài đặt ẩn các nguồn 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.

Lỗi Chromium: 1336604

Kênh Tương tác mới trong bảng điều khiển 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. Nhấp vào một tách cà phê và dừng ghi hình. Hai lượt tương tác xuất hiện trong kênh Số 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 các 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.

Lỗi Chromium: 1347390

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

Bảng điều khiển Thông tin chi tiết về hiệu suất hiện cho thấy bảng 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 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.

Lỗi Chromium: 1351735

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

Bảng điều khiển Recorder (Trình ghi) hiện tự động tạo tên cho bản ghi mới.

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)
• Ngăn Kiểu hiện hiển thị 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 bố cục bị lỗi là nguyên nhân gốc rễ tiềm ẩn gây ra sự 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ữ 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 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 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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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 mới, bản cập nhật hoặc bất cứ điều gì 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.
• Tweet tại @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.