找到用於在瀏覽器中調試 javascript 的偵聽器的最快方法是什么？

Question

背景：

我經常發現自己在一個陌生的代碼庫中調試網頁上的一段 Java 腳本，而且通常是一個見過許多開發人員和編碼方法的代碼庫。 有時我什至不知道可能正在使用什么技術，例如。 角度等

我第一次需要處理 Java 腳本是在特定行為出乎意料（即出錯）時。

問題：什么工具提供了最快的途徑來識別導致問題的代碼的入口點？

示例：我在頁面上有一個 html 元素，可以說是一個按鈕。 單擊該按鈕時，我希望在服務器上看到一個 http 請求。 元素可以通過多種方式與其 Java 腳本偵聽器相關聯。 例如 JQuery、第三方插件（如 knockout 等）、內部腳本等。

使用開發人員工具，我可以在瀏覽器中開始調試它，但前提是我已經知道要放置斷點的入口點。

有沒有比基於直覺和猜測工作在頁面代碼上進行正則表達式搜索以找到可能附加到該特定元素的內容更快的方法來找到入口點？

Answer 1

對我來說，最好的起點是 Chrome 開發者工具。 你可以：

1. 在元素選項卡中選擇一個元素
2. 在元素樹的右側，單擊“事件偵聽器”選項卡。
3. 找到您要調試的事件（如click ）
4. 單擊超鏈接以調出事件偵聽器的代碼，並設置斷點。 有時您必須單擊“格式化代碼”按鈕（看起來像{ } ）才能在多行上獲取代碼，以便斷點易於管理。
5. 單擊一下，您將到達斷點，從而允許您單步執行代碼、添加觀察變量等。