Chrome開發人員工具跟蹤功能序列

Question

我是Chrome開發人員工具的新手，我發現它非常強大。目前，我正在尋找一種方法來追蹤打開網頁時的功能流程，同時我也想知道如何找到單擊時單元觸發哪個功能。以下是一些示例：

1）跟蹤函數序列： 例如，在我的腳本中有20個函數。一些功能將調用其他功能。我想跟蹤函數調用。像首先調用哪個函數，然後通過此函數調用哪些函數。由於這20個函數非常龐大，僅通過查看腳本就很難遵循這個順序。

2）javascript中的某個元素觸發的功能： 例如，我在網頁上有一個按鈕，其中有一個或多個與此元素相關的功能。通過使用Chrome開發人員工具的事件監聽器，我只能在「點擊」下看到一些DOM元素，而不是與它關聯的功能。

有沒有辦法找到相關的功能？

我感謝你的幫助！

Answer 1

1. 在來源面板上，有一個調用堆棧選項卡，在其中你可以看到函數調用堆棧代碼執行在斷點被叫停。

   

2. 在元素面板，有一個事件監聽器選項卡，在其中可以看到所有的事件處理程序結合到元件，以及其中，它是在源代碼。

   

我建議你閱讀一些教程，例如this和this，並有更多的。這樣你可以更多地瞭解它並促進你的發展。