Firebug調試js代碼

博客搬家了，歡迎你們關注，https://bobjin.com

Firebug功能異常強大，不只能夠調試DOM,CSS，還能夠調試JS代碼，下面介紹一下調試JS。

一、認識console對象

　　console對象是Firebug內置的對象，該對象能夠在代碼中寫入，能夠在控制面板中寫入。

1）有五個方法來顯示信息。依次爲：

　　一、console.log()，能夠用來取代alert()或document.write()

　　二、console.info()，通常信息

　　三、console.debug()，除錯信息

　　四、console.warn()，警告提示

　　五、console.error()，錯誤提示

2）常常用的幾個方法：

　　一、console.group()和console.groupEnd()，用於分組顯示信息，如：

　　　  console.group("第一組信息");

     　　console.log("第一組第一條");

    　　 console.log("第一組第二條");

     　　console.groupEnd();

     　　console.group("第二組信息");

    　　 console.log("第二組第一條");

    　　 console.log("第二組第二條");

    　　 console.groupEnd();

　　二、console.dir()能夠顯示一個對象全部的屬性和方法。

      三、console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml代碼。好比,先獲取一個表格節點,

     　　　　var table = document.getElementById("table1");

   　　  而後,顯示該節點包含的代碼。

    　　       console.dirxml(table);

　　 四、console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否,則在控制檯輸出一條相應信息,而且拋出一個異常。

 　　五、console.trace()用來追蹤函數的調用軌跡。 若是想知道這個函數是如何被調用的,只需在該函數體中加入console.trace()方法就能夠了。

　　 六、console.time()和console.timeEnd(),用來顯示代碼的運行時間。如： 

　　　   console.time("計時器一");

    　　  for(var i=0;i<1000;i++){

    　　  for(var j=0;j<1000;j++){}

    　　  }

    　　  console.timeEnd("計時器一");

　　七、console.profile()和console.profileEnd(),分析程序各個部分的運行時間,找出瓶頸所在。

二、認識控制面板

　　如圖所示爲firebug的控制面板，左邊爲信息顯示區域，右邊爲js代碼調試區域，代碼編輯完以後，能夠點擊運行，便可在坐左邊顯示出來。

三、js代碼斷點調試

　　先來認識控制面板，左邊爲代碼區域，右邊爲監測區域，能夠在行號前面單擊添加斷點，再單擊取消斷點，F8爲繼續調試，F10爲單步跳過，F11爲單步進入，shift+F11爲單步跳出。

博客搬家了，歡迎你們關注，https://bobjin.com