Trình tự các công cụ phát triển trình tự theo dõi của Chrome

Question

Tôi là người mới sử dụng công cụ dành cho nhà phát triển Chrome và tôi thấy nó rất mạnh mẽ. Hiện tại, tôi đang tìm kiếm một cách để theo dõi dòng chảy của các chức năng khi tôi mở một trang web và cũng có thể, tôi tự hỏi là có làm thế nào tôi có thể tìm thấy chức năng nào một yếu tố kích hoạt khi nó được nhấp. Dưới đây là một số ví dụ:

1) Chuỗi chức năng theo dõi: Ví dụ: có 20 hàm trong tập lệnh của tôi. Một số chức năng sẽ gọi các chức năng khác. Tôi muốn theo dõi các cuộc gọi chức năng. Giống như hàm nào được gọi đầu tiên và sau đó hàm nào được gọi theo sau bởi hàm này. Vì 20 chức năng này là khá lớn, nó là khá khó khăn để làm theo trình tự bằng cách chỉ cần nhìn vào kịch bản.

2) Chức năng nào kích hoạt một phần tử trong javascript: Ví dụ: tôi có một nút trên trang web, có một hoặc nhiều hàm được liên kết với phần tử này. Bằng cách sử dụng Trình xử lý sự kiện của công cụ nhà phát triển Chrome, tôi chỉ có thể thấy một số phần tử DOM trong "Nhấp" thay vì chức năng được liên kết với.

Có cách nào để tìm các hàm liên quan không?

Tôi đánh giá cao sự trợ giúp của bạn!

Answer 1

1. Trong Nguồn bảng điều khiển, có một Call Stack tab, trong đó bạn có thể thấy chức năng gọi stack khi thực thi mã được dừng tại các điểm nghỉ ngơi.

   

2. Trong Elements bảng điều khiển, có một chấp hành sự kiện tab, trong đó bạn có thể xem tất cả trái phiếu xử lý sự kiện cho các phần tử, cũng như nó ở đâu trong mã nguồn.

   

Tôi đề nghị bạn đọc một số hướng dẫn, ví dụ this và this, và có rất nhiều. Vì vậy, bạn có thể biết thêm về nó và thúc đẩy sự phát triển của bạn.