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

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

Nhóm tệp theo chế độ xem Đã 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 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 Công cụ cho nhà phát triển hiện 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 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 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ờ. Video này không cho thấy "nguyên nhân gốc rễ" 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 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 thao tác không đồng bộ

Trong quá trình này, Công cụ cho nhà phát triển đã giới thiệu 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 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 phải không? Không phải vậy. Hầu hết thời gian, khung bạn đang dùng sẽ xử lý việc lập lịch và thực thi không đồng bộ. Trong trường hợp đó, khung sẽ sử dụng API, bạn không cần lo lắng về điều 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 vấn đề trong mã của bạn nhanh hơn trong quá trình gỡ lỗi vì giờ đây, DevTools 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 Bảng điều khiển. Dấu vết ngăn xếp chỉ cho thấy mã của bạn (ví dụ: app.component.ts button.component.ts). Nhấp vào Hiện thêm khung để xem dấu vết ngăn xếp đầy đủ.

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 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 rễ 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 quá trình này, Công cụ cho nhà phát triển 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. Các 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 này thông qua 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.

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

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ị những khung hình có liên quan đến mã của bạn.

Mở bản minh hoạ này rồi đặt mộ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 hình từ 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 chế độ Hiển thị các khung có trong danh sách bỏ qua. Trước đây, theo mặc định, Công cụ cho nhà phát triển sẽ hiển thị tất cả các khung.

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

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 chế độ ẩ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ần 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.

Ẩ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

Với chế độ cài đặt hide ignore-listed sources (ẩ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 Command Menu (Trình đơn lệnh). Trước đây, khi bạn tìm kiếm tệp trong Trình đơn lệnh, hệ thống 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 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.

Ẩ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 Tương tác mới trong bảng điều khiển Hiệu suất

Sử dụng dải Tương tác mới trong bảng Hiệu suất để hình dung 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ê rồi dừng ghi. Hai lượt tương tác xuất hiện trong bản nhạc 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 này đượ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

Phân tích 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 Thông tin chi tiết về hiệu suất sẽ cho thấy 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.

Phân tích 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 bản ghi trong bảng điều khiển Máy ghi âm

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

Tên mặc định cho bản ghi 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, đôi khi tiện ích Máy ghi âm không xuất hiện trong bảng điều khiển Máy ghi âm. (1351416)
  • Giờ đây, ngăn 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 hiện tượng bố cục bị giật làm nguyên nhân gốc rễ tiềm ẩn gây ra hiện tượng bố cục thay đổi trong bảng 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ữ 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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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.

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

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.