Có cách nào để xem chức năng Javascript nào (tên của hàm) thực thi trong thời gian thực trong Thanh tra của Chrome không? Ví dụ:

Question

Ví dụ: giả sử có mã Javascript sẽ thực thi someFunction() khi nút được nhấp và tôi nhấp vào nút đó. Tôi tự hỏi nếu có một số cách để thấy rằng someFunction() đã được thực hiện. Có cách nào để xem những chức năng nào được thực thi trong Chrome trong thời gian thực?

Nếu đó là tab Tiểu sử trong thanh tra thực hiện thủ thuật, bạn biết chính xác chức năng nào sẽ kích hoạt trong thời gian thực với điều đó?

EDIT 1/21/2012 12: 36p Thái Bình Dương: Từ bình luận của Brian Nickel bên dưới, tab Dòng thời gian trong Trình kiểm tra là cách để xem điều gì xảy ra trong thời gian thực, nhưng làm cách nào bạn thấy tên của các hàm được thực hiện trong dòng thời gian?

Answer 1

Công cụ nhà phát triển Timeline và Scripts có thể được sử dụng để thực hiện mục tiêu này.

• Mở bảng công cụ nhà phát triển và nhấn Ghi dưới dòng thời gian để bắt đầu hoạt động theo dõi.
• Kích hoạt sự kiện bạn quan tâm (ví dụ: trong ví dụ của bạn, nhấp vào nút), sau đó dừng ghi (hoặc tiếp tục ghi lại, nhưng nhận thức được lượng dữ liệu bạn đang thu thập).
• Lưu ý các entires đã đăng nhập trong bảng Timeline. Tìm sự kiện có liên quan và nhấp vào mũi tên xoắn bên trái thanh thời gian cho sự kiện đó. Thao tác này sẽ hiển thị các cuộc gọi hàm được liên kết với sự kiện đó.
• Nhấp vào liên kết ở bên phải của hàm gọi để xem JavaScript có liên quan. (Bạn yêu cầu tên hàm, nhưng hãy nhớ rằng sự kiện có thể được liên kết với một hàm ẩn danh, do đó không phải lúc nào cũng có sẵn tên.)
• Nếu bạn muốn tự mình duyệt qua trình xử lý sự kiện, hãy chèn breakpoint tại dòng sau khai báo của trình xử lý (giả sử khai báo xử lý sự kiện lớn hơn một dòng). Ngoài ra, mở rộng các Event Breakener Event trong bảng Scripts và kiểm tra kiểu sự kiện thích hợp (như được liệt kê trong bảng Timeline cho sự kiện liên quan). Lưu ý rằng cách tiếp cận này sẽ phá vỡ mọi phiên bản của sự kiện đó, thay vì lời gọi duy nhất mà bạn quan tâm.

Nếu bạn gặp sự cố với JavaScript rút gọn và chèn điểm ngắt (vì mỗi dòng quá dài), đây là mẹo: mở tệp tập lệnh được rút gọn trong bảng Tập lệnh thông qua menu thả xuống, sau đó nhấp vào {}. Điều này sẽ cho phép Pretty Print, mở rộng mã được rút gọn thành một cái gì đó dễ đọc hơn bằng cách thêm khoảng trắng. Điều này cho phép bạn chèn điểm ngắt chi tiết hơn. Lưu ý rằng nếu bây giờ bạn quay lại bảng điều khiển Dòng thời gian, tham chiếu tập lệnh (ví dụ: jquery.min.js:3) hiện sử dụng số dòng được in đẹp, chứ không phải các số dòng được cắt nhỏ, trắng.

Answer 2

Có rất nhiều các tiện ích tốt, bạn có thể sử dụng: console.trace();, debugger vv

Answer 3

Thêm vào Grace câu trả lời, hãy tham khảo hai bài báo này cũng

http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html

http://www.sagarganatra.com/2011/05/javascript-debugging-with-chrome.html