作者aoksc (重出江湖)
看板Ajax
標題[問題] 如何找出執行了哪些function?
時間Fri Sep 21 00:29:25 2018
想請教各位
如果你接手到js非常亂
一個js檔都是幾百行起跳
那要找到某個tag觸發了哪些事件各位都是怎麼找的?
因為小弟我在找的時候大概不外乎就是用id或class去整個專案搜尋
去看看可能哪裡有call到
但這種方式對於寫法很奇杷或是重複名稱太多code
往往連從哪裡開始都無從查起或是要查的非常久
再不然就是要下一大堆debugger看那一個地方他停住了
想請問各位在trace javascript code的時候
是不是有什麼技巧可以分享
或是有什麼資料可以推薦給小弟呢?
感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.233.159.254
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1537460969.A.1FE.html
1F：→ InfinityGate: dev tools 直接看綁了哪些 Event Listener 09/21 00:59
2F：→ jhnny97: 你可以試試在第一支JS設一個breakpoint，然後一步步跳 09/22 20:06
感謝解答
那像我用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
3F：推 InfinityGate: console.trace() 09/23 23:05
所以console.trace()也是要去埋在可能的code裡面
然後看看有無出現相關訊息這樣?
※ 編輯: aoksc (118.233.159.254), 09/23/2018 23:56:08
4F：→ InfinityGate: 完全沒有任何線索可以塞trace嗎? 09/24 01:53
5F：→ InfinityGate: jquery可以試試用visual event找 09/24 01:54
6F：推 othree: DevTool Performance 錄一下你想查的事件 09/24 23:38
7F：推 rexyeah: 你可以對HTML ele下中斷點看哪個事件修改節點或屬性 09/28 10:35
8F：推 visa9527: 現在 Firefox 的 console 不是已經可以看經歷過的所有 10/02 15:38
9F：→ visa9527: function了? 不過若有用遞迴的話你會看得很花 10/02 15:38