[問題] 如何找出執行了哪些function?

[aoksc (重出江湖)]

想請教各位

如果你接手到js非常亂

一個js檔都是幾百行起跳

那要找到某個tag觸發了哪些事件各位都是怎麼找的?

因為小弟我在找的時候大概不外乎就是用id或class去整個專案搜尋

去看看可能哪裡有call到

但這種方式對於寫法很奇杷或是重複名稱太多code

往往連從哪裡開始都無從查起或是要查的非常久

再不然就是要下一大堆debugger看那一個地方他停住了

想請問各位在trace javascript code的時候

是不是有什麼技巧可以分享

或是有什麼資料可以推薦給小弟呢?

感謝

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.233.159.254
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1537460969.A.1FE.html
→ InfinityGate: dev tools 直接看綁了哪些 Event Listener
→ jhnny97: 你可以試試在第一支JS設一個breakpoint，然後一步步跳
感謝解答

那像我用Chrome的dev tools

在event的部份如下圖

https://imgur.com/a/x92qrmG

現在假設我是要圖片zoom in zoom out是在哪裡用js寫的

我推測是focus event觸發

測試也應該沒錯

我是直接在jquery原始檔下中斷點

但它並不是用by id或by class的方式去select

如果用img、或是.focus這類的關鍵字去搜尋檔案又會找出一堆

請問還有什麼有效率的方式或功能可以方便找出定義這觸發事件的源頭呢?

謝謝
※ 編輯: aoksc (118.233.159.254), 09/23/2018 22:54:02
推 InfinityGate: console.trace()
所以console.trace()也是要去埋在可能的code裡面

然後看看有無出現相關訊息這樣?
※ 編輯: aoksc (118.233.159.254), 09/23/2018 23:56:08
→ InfinityGate: 完全沒有任何線索可以塞trace嗎?
→ InfinityGate: jquery可以試試用visual event找
推 othree: DevTool Performance 錄一下你想查的事件
推 rexyeah: 你可以對HTML ele下中斷點看哪個事件修改節點或屬性
推 visa9527: 現在 Firefox 的 console 不是已經可以看經歷過的所有
→ visa9527: function了? 不過若有用遞迴的話你會看得很花