Tôi có ~ 100-200 chức năng javascript được tải trên trang web. Tôi muốn xác định chức năng javascript nào được thực thi khi tôi nhấp vào một mục hoặc một mục khác trong Google Chrome. Tôi có thể làm như thế nào với Công cụ dành cho nhà phát triển web Chrome? Cảm ơn!Theo dõi thực thi Javascript trong Chrome - cách thực hiện?
Một cách tiếp cận đơn giản là bắt đầu Công cụ nhà phát triển Chrome, chuyển sang bảng điều khiển Nguồn và nhấn F8 (Tạm dừng thực thi). Điều này sẽ phá vỡ câu lệnh JavaScript được thực thi đầu tiên.
Cách tiếp cận khác là đặt điểm dừng trình nghe sự kiện cho mousedown hoặc nhấp: trong cùng bảng điều khiển Nguồn, mở rộng "Điểm ngắt danh sách sự kiện" trong thanh bên tay phải. Mở rộng mục "Chuột" và kiểm tra các sự kiện bạn muốn chia nhỏ (ví dụ: "nhấp", "mousedown"). Sau đó, nhấp vào trang của bạn và xem phần thực thi JS trong DevTools. Thưởng thức!
Tôi muốn xác định chức năng javascript nào được thực thi khi tôi nhấp vào một mục hoặc một mục khác trong Google Chrome.
Hiện có một tiện ích mở rộng tuyệt vời được gọi là Visual Event thực hiện chính xác điều đó. Nó chỉ nhận ra các trình xử lý sự kiện được thiết lập thông qua các thư viện js phổ biến (jQuery, YUI, MooTools, Prototype, Glow) và các sự kiện DOM Level 0.
hoạt động tốt. Không chắc chắn về bảo mật, vì vậy tôi bỏ đi khi tôi không gỡ lỗi. – MagicLAMP
Một thay thế cho tạm dừng thi công (mà thường hoạt động tuyệt vời, nhưng không hoạt động tốt trên các trang đó thường xuyên thực thi mã định kỳ)
Bạn có thể sử dụng hồ sơ chrome để ghi lại cho một khoảng thời gian ngắn. Sau khi bạn kết thúc ghi âm, nó sẽ hiển thị cho bạn một bản tóm tắt thời gian cpu dành cho bất kỳ chức năng nào đã được thực hiện trong quá trình ghi. Chúng tôi không thực sự quan tâm đến thời gian CPU, chỉ sử dụng công cụ này bởi vì nó sẽ cho chúng ta thấy những chức năng nào đã được thực thi.
Về cơ bản chỉ cần bắt đầu ghi:
Sau đó làm hành động của bạn (ví dụ, bấm vào một nút trên trang web, hoặc làm bất cứ điều sẽ gây ra các mã thú vị để thực hiện). Sau đó dừng ghi âm và xem kết quả:
Thông báo Tôi đang sử dụng "từ trên xuống" Chế độ xem - trong đó cho thấy bạn các cuộc gọi stack, và bạn có thể đi sâu xuống để xem những chức năng cuối cùng được gọi tới. Ví dụ, một số hàm ẩn danh được gọi là đầu tiên (có thể là kết quả của setTimeout hoặc có thể là một trình xử lý sự kiện nhấn), và sau đó nó được gọi là một số phương thức được xác định bởi s.track.s.t, sau đó được gọi là s_doPlugins và ... Điều quan trọng là ở trên cùng chế độ xuống, các mục ở trên cùng của cây tạo thành bắt đầu ngăn xếp cuộc gọi và do đó chúng thường là hàm được đăng ký bởi một số chức năng hẹn giờ (setTimeout, setInterval, requestAnimationFrame, v.v ...) hoặc một số trình xử lý sự kiện (click) , mousemove, load, v.v ...).
Bạn cũng có thể sử dụng chế độ xem "biểu đồ", chế độ này cho bạn thấy chức năng nào được gọi vào thời điểm đó, được vẽ trên biểu đồ từ trái sang phải. Điều này giúp bạn xác định chức năng nào bạn đang thực sự tìm kiếm vì bạn có thể có ý nghĩa về thời gian mã được thực thi trong bản ghi của bạn (ví dụ, ngay ở giữa).
btw - Tôi tin rằng hầu hết các trình duyệt hiện đại khác đều có khả năng tương tự.
thx rất nhiều! những gì sự kiện chuột tôi nên bắt nếu tôi chọn văn bản trong FCKeditor, "nhấp chuột trái", di chuyển chuột đến một nơi khác và phát hành. – Pave
"mouseup", có lẽ. Tuy nhiên, không quen thuộc với FCKeditor. –
tôi đã thử nó, nhưng ... vẫn không làm việc ... tôi sẽ cố gắng bản thân mình. cám ơn! – Pave