» Using firebug for firefox 除錯 javascript
在 Web 程式設計，不管是 html 或者是 CSS、甚至 javascript，都可以利用 FireFox Plugin: firebug 來除錯，順便推薦另一套 Web Develper 工具：Web Developer 1.1.8，這兩套都可以玩看看，在網路看自己東華電機學長 gasolin 寫過一篇：3 分鐘學會用 firebug 除錯 ，裡面有一個影片，建議大家看看：影片，如何利用 firebug 來對 javaascript 除錯，介紹了 firebug 優點。底下整理我看到的內容
1. 利用 console.log() 來針對變數除錯
以往都是利用 window.alert() 的方式來看看變數是否正確，現在只要在 javascript 裡面加入 console.log() 針對不同變數取值出來觀看
<script type="text/javascript">
function doThis()
{
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.log(b);
}
</script>
function doThis()
{
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.log(b);
}
</script>
輸出會顯示：
a is test
[1, 2, 3, 4]
[1, 2, 3, 4]
2. 印出有圖示的訊息 console.info/console.warn/console.error
<script type="text/javascript">
function doThis()
{
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.info(b);
console.warn(b);
console.error(b);
}
</script>
function doThis()
{
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.info(b);
console.warn(b);
console.error(b);
}
</script>
這功能跟 console.log 差不多，只有差在前面有圖示符號，請看下圖：
3. 使用 firebug 除錯 debugger;
<script type="text/javascript">
function doThis()
{
debugger;
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.info(b);
console.warn(b);
console.error(b);
}
</script>
function doThis()
{
debugger;
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.log("a is %s ", a);
console.info(b);
console.warn(b);
console.error(b);
}
</script>
只要在 js 裡面加入 debugger; 就會進行逐步除錯，我想如果寫過 Window form 的使用者，C# ASP.net 最常用的就是逐步徵測錯誤，這功能相當方便，每一行跑了哪些變數，都可以逐一在旁邊顯示喔
大家看到逐步偵錯到第19行，前面變數都會在旁邊顯示喔，原本都是 null。
4. 計算 js 花費時間 console.time/console.timeEnd
<script type="text/javascript">
function doThis()
{
console.time("do this");
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.timeEnd("do this");
}
</script>
function doThis()
{
console.time("do this");
var a = "test";
var b = [1, 2, 3, 4];
var c = document.getElementById("li");
console.timeEnd("do this");
}
</script>
只要加上 console.time(”do this”); 跟最後 console.timeEnd(”do this”); 就可以在 console 看到執行時間喔，很方便吧。Firebug 還有很多除錯功能，像 CSS 可以直接註解馬上看到結果，這都是 Web 工程師必備的工具。
