如何從javascript或jQuery中的DOM元素或變量獲取/查找正在調用的函數

Question

我不確定如何或是否可以做到這一點。 我有一個通過CMS創建的頁面。 有很多文件，即： includes ， .LESS和.js文件。 根據所選擇的模板，css規則將aside#socialicons元素設置為“ display：none”。 但是，此規則被即時設置在同一元素上的內聯css樣式"display:block"所覆蓋。

我瀏覽了幾個文件（ .css, .less和.js ）以嘗試查找此屬性是如何動態添加的，以便我可以對其進行更改。

在global.js中，變量的聲明和定義如下：

g = g || {};
g = {
selectors: {
        socialbox: "aside#socialicons",
            ....
} 

逐行，我手動瀏覽了所有.js文件以找到g.selector.socialbox變量。 我希望找到正在操縱它的功能。 我還沒有找到。 我還瀏覽了除選擇器aside#socialicons所有css / less文件aside#socialicons ，只能找到將其設置為display:none;visibility:hidden;的css規則display:none;visibility:hidden; 。

告訴我，如果函數確實在修改此元素，那么在Chrome或Firebug的開發人員工具控制台中是否可以找到一種方法，在其中我可以找到要調用的函數以將display:block添加到aside#socialicons/g.selector.socialbox元素？ 斷言可以奏效嗎？ 如果這些方法中的任何一種都能起作用，請讓我知道它是如何完成的嗎？

非常感謝。

更新：所有js文件均已壓縮並編譯為一個.js文件，以提高性能。 該頁面使用了大約10個javascript和10個javascript庫文件。 我可以查看源代碼來查看正在加載的文件，但是由於在不同的文件中使用不同的名稱（例如g.selectors.socialbox或g.socialbox定義了該元素，因此嘗試遵循aside#socialicons變量變得令人困惑aside#socialicons元素。 在firebug中，我可以在所有文件中搜索元素和/或變量，但是如果變量已被重命名，我將會迷路。 歡迎所有幫助。 我沒有寫這段代碼。

非常感謝。

Answer 1

在開發人員工具的“ Elements選項卡中，右鍵單擊該元素，然后選擇“ Break on Attribute Modification 。 然后等待斷點命中，您可以檢查堆棧跟蹤以查看其修改位置。

Answer 2

如果找不到g.selector.socialbox ，請嘗試查找g.selector.socialbox的實例。 可能是因為它們遍歷g.selector每個屬性，而不是直接調用g.selector.socialbox 。

嘗試在global.js的各個位置設置一些斷點。 當您逐步通過它們時，它將使您更好地了解函數調用的發生位置。 可以通過Firefox中的“腳本”標簽或Chrome中的“源”標簽進行設置。

Answer 3

可能最簡單的方法是打開Chrome，並從調試控制台鍵入： getEventListeners(object) 。 它將向您顯示附加到該對象的所有事件偵聽器以及功能是什么。

參考： https : //developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

祝好運

Answer 4

克里斯，可能不是最好的答案，但是不知道有問題的CMS很難回答。

您可以覆蓋JS，但是CSS會更簡單

#divwithinlinestyle { display:block !important; }