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, mục Nhóm tệp theo chế độ xem Đã tạo / Đã 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, mục 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 thao tác 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, chỉ số này chỉ cho biết một phần thông tin.

Ví dụ: hãy 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, 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ỉ 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 hình để 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. Phải mất nhiều thời gian hơn để xác định nguyên nhân gốc rễ của lỗi.

Trong nền, DevTools sẽ 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.

Nếu muốn luôn xem dấu vết ngăn xếp đầy đủ, 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 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 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ỉ hiển thị các khung từ 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, DevTools 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 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 nút. Trước đây, kết quả bao gồm các tệp từ node_modules, thậm chí một trong các tệp node_modules 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 Số lượt tương tác mới trong bảng điều khiển 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 ly cà phê rồi dừng ghi. 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 rõ 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

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

• Trước đây, các tiện ích của Trình ghi âm thỉnh thoảng không xuất hiện trong bảng điều khiển Trình 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ị lộ trình quan trọng cho phông chữ web LCP 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 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.