版權所有，轉載請註明來源http://gogo1217.iteye.com，違者必究！
相信很多人都遇到過以下幾個問題:
- 爲了調整頁面某個元素的寬度或高度到最適合值，在ide中修改css或者html再刷新瀏覽器，重複上述修改步驟不下20次；
- 爲了修改html，先在ide修改後在刷新瀏覽器，重複上面步驟不下10次。
- 爲了得到javascript執行中的某個變量在javascript中調用很多次alert函數；
- 爲了監控mouse事件，創建一個div,通過javascript在div中寫一些html；
- 更多更多的問題...
如果你遇到過上面的問題，那麼本文能幫你解決上述所有的問題，從而使你將更多的精力投入到其他工作中。
本文中分爲3部分，第一部分：調試工具介紹，詳細介紹了當前流行的各種瀏覽器的調試工具；第二部分:firebug的使用；第三部分：ie調試工具的使用。
1.新建測試頁面firebug-demo.html,代碼如下：
<html>
<head>
<style type="text/css">
.one{
float:left;
width:200px;
}
.two{
float:right;
width:200px;
}
</style>
<script type="text/javascript">
change=function(){
document.getElementById('red').innerHTML="red changed!";
}
</script>
</head>
<input type="button" onclick="change()" value="點擊改變"/>
<div style="clear:both"></div>
<div class="one" style="background-color:red" id="red">red</div>
<div class="two" style="background-color:blue">blue</div>
</html>
2.使用火狐打開firebug-demo.html,界面如下圖所示：
3.在介紹修改dom屬性之前，先介紹firebug中的頁面元素查找工具（下圖中紅圈部分）。
點擊該按鈕，鼠標挪到紅色的red區域，此時該元素會邊框發光，同時firebug中的html選項卡中div#red被高亮選中。
反過來，不管查找工具有沒有被選中，如果鼠標劃過firebug中的html選項卡代碼，頁面中的元素均被高亮。
在編輯的過程中，通過TAB或回車 來切換下一個屬性或者屬性值。
4.使用firebug實時修改css樣式：
firebug即能修改dom上面的 style屬性來改變樣式，也能直接 編輯外部樣式表改變樣式。
style屬性（修改行內樣式）： 影響當前修改的元素。 選擇firebug工具欄的HTML選項卡，點擊左邊的div#red元素，點擊style的屬性值,此時style變爲可編輯狀態，修改style屬性值爲"height:300px;background-color:yellow;"。隨着我們的修改，瀏覽器將會實時的重新渲染dom，應用我們修改後的樣式，我們可以發現，左邊div#red的背景色由紅色變爲了黃色，並且高度改變爲300像素了。
編輯外部樣式表: 影響頁面所有匹配的元素。 選擇firebug工具欄的HTML選項卡，點擊左邊的div#red元素，此時，右邊將會將該作用於該元素的樣式表展現出來。點擊樣式表中width屬性的值，修改爲「width:50%」；然後按「TAB」鍵 ，樣式表會另起一空白行，在屬性輸入框中輸入border，在按住「TAB」鍵，在屬性值填寫「1px solid #CCC」;重複上述步驟完成height:400px。隨着我們的修改，瀏覽器將會實時的重新渲染dom，應用我們修改後的樣式，我們可以發現，左邊div.two的邊框爲1像素灰色的實線，高度爲400px，寬度爲50%。
注意：該修改不會影響html或者css文件本身，當達到最終滿意效果時，還需將修改後的值更新至html或者css文件中。
5.修改html元素的屬性包括innerHTML同修改css樣式中的style屬性。