在 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>

輸出會顯示:

a is test
[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>

這功能跟 console.log 差不多,只有差在前面有圖示符號,請看下圖:
firebug_01 (by appleboy46)

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>

只要在 js 裡面加入 debugger; 就會進行逐步除錯,我想如果寫過 Window form 的使用者,C# ASP.net 最常用的就是逐步徵測錯誤,這功能相當方便,每一行跑了哪些變數,都可以逐一在旁邊顯示喔
firebug_02 (by appleboy46)
大家看到逐步偵錯到第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>

只要加上 console.time(”do this”); 跟最後 console.timeEnd(”do this”); 就可以在 console 看到執行時間喔,很方便吧。Firebug 還有很多除錯功能,像 CSS 可以直接註解馬上看到結果,這都是 Web 工程師必備的工具。

Related View