如何使用Firebug Lite來輔助偵錯網頁

  • 13543
  • 0

如何使用Firebug Lite來輔助偵錯網頁

有使用FireFox來開發網頁的,應該都有聽說過Firebug這個擴充套件,它能提供開發人員在開發網頁時所需要的偵錯功能。這篇所要介紹的Firebug Lite則是能讓你在各式各樣的平台上使用類似Firebug這樣的功能,不管是在IE、Chrome...都可以使用。

 

Firebug Lite有幾種使用方式,最簡單且最直接的就是透過網頁書籤下去啟用。這邊筆者以IE為例簡單的介紹一下,首先我們必須先到Firebug Lite : Firebug這邊找到給網頁書籤使用的連結位置,在上方按下滑鼠右鍵,在彈出的滑鼠右鍵快顯選單中,選取加到我的最愛的滑鼠右鍵選單選項。

image

 

將之加入到我的最愛。

image

 

加完到我的最愛後,當有網頁需要偵錯,我們可以透過我的最愛列表點選Firebug lite的網頁書籤。

image

 

點選後我們可以看到網頁下方會出現類似Firebug的開發人員工具。

image

 

另外一種做法是直接將Firebug lite嵌到網頁中,可以直接連接網路上的Firebug lite javascript,也可以將Firebug lite的Javascript抓下來本地連結。使用上都是類似的,只要在Header element中將Javascript加入,並在html element設定debug attribute為true就可以了。

 

使用起來會像下面這樣:

    <header>
        <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"/>
    </header>
    <body>
        <h1>Test firebug lite page</h1>
    </body>
</html>

 

運行後我們可以看到跟使用書籤啟動一樣的效果:

image

 

另外在這邊Firebug lite也提供了一些細項可供設定:

Option Default
saveCookies false
startOpened false
startInNewWindow false
showIconWhenHidden true
overrideConsole true
ignoreFirebugElements true
disableXHRListener false
disableWhenFirebugActive true
enableTrace false
enablePersistent false

 

像是要在啟動時將Firebug lite以新視窗開啟,而不要置於網頁最下方的話,我們就可以使用類似下面這樣的撰寫方式:

	{
	    startInNewWindow : true
	}
	</script>

 

Link