如何在Chrome開發工具中找到添加style屬性的地方？

我目前正在研究一個網站，其中各種腳本正在修改DOM（通過點擊/懸停類型事件以及頁面加載），更改元素的高度/寬度等，並試圖找出哪些腳本正在影響哪些元素。例如，height: 9px被添加到下面的<span>元素，我需要知道什麼腳本是這樣做的（目前使用的Chrome瀏覽器開發工具，但如果另一個瀏覽器能夠更好地完成這個任務，我願意）：如何在Chrome開發工具中找到添加style屬性的地方？

<span data-id="m_left_fitting_finish_filter" class="sidebar__filterBlock-title" style="height: 9px;">

嘗試選擇Break on>Attributes modifications並重新加載頁面，雖然這似乎沒有做任何事情 - 這隻適用於類/ ID更改嗎？

來源

2015-12-09 wickywills

firebug 2.0.3 for firefox ... –

@AnkitKathiriya請你可以提供在Firebug中實現這個功能的說明嗎？ – wickywills

打開console，選擇Elements選項卡，在右側面板中選擇Styles選項卡。應該列出加載了css的文件。可以移回到左側面板，選擇Sources選項卡;然後可以從最左側的面板中選擇一個腳本，突出顯示整個腳本，如有必要，請右鍵單擊，選擇Add to Watch。或者，可以通過在左側面板中選擇script來複制整個腳本，右鍵單擊，選擇Add Folder to Workspace，在文本編輯器中評估height屬性。

來源

2015-12-09 10:53:33 guest271314

這是一個很好的問題，我希望視頻能夠幫助也（https://www.youtube.com/watch?v=vh-lZR2z_Lw&feature=youtu.be），但在簡單的步驟，爲您重現此是：

打開檢查
去「曲線」標籤
準備好開始/停止按鈕來記錄所有的腳本你的行動
做實際的行動（鼠標懸停，點擊，點擊..等）
檢查剖析「尖峯」，忽略了一些框架發起一個..（有一種方法可以讓你黑名單一些像jQuery或類似的腳本，但你可以谷歌這個我認爲:)

hth！

來源

2015-12-09 11:35:41

感謝您的迴應，儘管在我的特殊情況下，樣式屬性出現在加載中，而不是由動作觸發，使得事情有點棘手，除非有另一種方式？ – wickywills

您可以確定按下「開始」記錄btn，刷新頁面，然後「停止」以查看頁面加載事件 –

在我的特定情況下（在安裝了各種模塊的大型Magento網站上工作），該列表中有100個，並且仍然需要很長時間。目前正在調查其他瀏覽器必須提供的功能。 – wickywills

如何在Chrome開發工具中找到添加style屬性的地方？

回答

相關問題