Firebug 簡直是一個整合發展環境

Firebug 是 firefox 的 plugin, 可用以學習 html, css, javascript, dom, ... 現改現看! (我的 firefox 是 2.0)
安裝: 可能需要先存檔, 再從 firefox 裡面用「檔案=>開啟檔案」安裝。按右下角的綠勾啟動, 瀏覽器下半部變成 firebug。
切到 html 分頁, 打開 <body> (在旁邊的加號點一下), 打開 <div id="content">, 打開 <ol>。滑鼠在每個 <li> 上面滑過去, 看看原網頁的色彩變化。
在 <ol> 上面點兩下, 進入編輯模式 (或按上方的 Edit), 改成 <ol start=38> 看到原網頁的數字立即改變。再按一次 Edit 切回檢視模式。又, 任挑一個 <li>, 把它改成: <li style='background: yellow'>, 底色馬上變色。
切到 css 分頁, 注意 Edit 旁邊變成 core.css。點一下 core.css, 出現此網頁所用到的所有 css 檔清單: core.css 和 light.css。改選 light.css。
在 body 的 background 後面, 把顏色改成 #ccff80 之類的。請搜尋 css2 tutorial 學習 css2 的用法, 直接在本頁實驗。改壞了沒關係, 重新整理網頁就 ok 了。
切到 console 分頁。在底下空白列 > > > 右邊打幾個簡單的 javascript 指令。 (見前一章) Tab 鍵有 completion 功能: 變數或函數名稱, 只要打前幾個字元, 按 Tab 鍵就會自動打完。按右下角的紅底白勾, 改成在頁面右半部打指令。這個模式適合打較長的測試; 此時要按 run 才會執行。再按一次又切換回來一列模式。
例如在 console 執行: all=document.getElementsByTagName("ol")[0].childNodes
想把所有 childNodes 印出來... 要印到那裡去呢? Firebug 有一個內建的物件 console。一如命令列版的 js 解譯器的 print, 這只是為了方便交談式的除錯功能, 僅能在 firebug 使用。 for (i=0; i<all.length; ++i) { if (all[i].childNodes[0]) console.log("%d: %s", i, all[i].childNodes[0].textContent); } 關於 console, 詳見 Firebug Console API。不知為何, 有時會出現 "console is not defined", 重新整理頁面就可以了。
Console 的用法, 詳見 JavaScript Command Line
呼, 累斃了, 不想學 DOM。改用 jquery。

Firebug 簡直是一個整合發展環境

更多參考資料