在Firebug中調試

不知道是否有人可以提供一些建議。基本上，這是我不時遇到的東西 - 我正在學習使用螢火蟲進行調試，並試圖追蹤在複雜的一羣WordPress的/花哨的框文件中設置樣式屬性的位置。基本上，我試圖讓fancybox自動調整到元素的寬度，我知道fancybox選項來啓用此功能，但整個盒子似乎覆蓋了一個固定的寬度，這是我找不到任何地方的樣式表。在Firebug中調試

element.style { 
border-width:10px; 
height:84px; 
width:987px;

現在，這不會對在Firebug右側關聯的樣式表，所以我假設這意味着它的計算上的JS/PHP的地方飛？

我在追尋的是如何追蹤它被設置的位置的指針，以及如何使用螢火蟲識別它是否被設置在樣式表之外？這是我可以成爲一個更好的調試器:)謝謝你的期待。

來源

2010-11-24 frazzle

在Mozilla瀏覽器中使用螢火蟲點擊左上角的箭頭圖標並選擇頁面上的任何控件。它會在右側顯示他們的風格（css）。在這裏您可以進行任何更改，並且會在瀏覽器中顯示。

認爲它會對你有幫助。

來源

2010-11-24 10:36:48

嗨，謝謝你的回答 - 我認爲雖然我已經使用它來處理樣式，但是這個特定問題的問題在於它似乎沒有關聯樣式表（當在右側的面板中查看時在單擊tha箭頭後顯示樣式），再加上它說element.style {}讓我認爲它是在js或php中動態設置的，而不是硬編碼到樣式表中。我想通過使用螢火蟲來識別發生在哪裏，有沒有辦法做到這一點？乾杯。 – frazzle 2010-11-24 10:43:46

首先找到元素
一旦你這樣做，觸發事件，你會看到當element.style被指定爲樣式信息的來源變化

來源

2010-11-24 10:39:45 Starx

，這意味着風格是內聯的（即指定爲標籤的屬性）。

E.g.

<div style='border-width:10px;height:84px;width:987px;>This is a box</div>

如果你不能看到源代碼，很可能它已經被一些JavaScript

添加使用的Firefox網頁開發者的插件，你不僅可以查看源代碼，你可以查看生成的源代碼，它會在之後給出源任何javascript已對其執行操作。

來源

2010-11-24 10:46:42

嗨，我可以看到之前的來源，以及計算出的風格 - 我看到的是如果有辦法確定元素正在應用哪個文件/行號，如果您明白我的意思。目前，我只是通過手動查看所有文件來了解我是否可以對其應用的位置有所瞭解。乾杯 – frazzle 2010-11-24 11:46:24

在Firebug中調試

回答

相關問題