在 javascript 除錯時, 雖然有好用的 firefox 配合 plugin – firebug 來進行 step by step 的除錯, 也可以即時看到變數內容, 也很容易進行除錯, 但在長篇大論的 javascript 裡除錯, 總是希望能更快地獲得變數的值, 方便在偵測這些變數, 尤其是只有 IE 或沒有 firebug 在手邊時, 怎麼辦呢?
我們常常就直接用 alert 來進行變數的顯示, 但又要一直點一直點, 也是有點累(其實是自己懶), 但變數多時, 就更顯得麻煩, 於是用一種容易一點的方法, 就是配合 DHTML直接做頁面輸出就好了, 雖然談不上什麼技術, 但也算是一種小技巧, 給各位參考:
1. 先放一個 div 進來, 如下:
<div id=output></div>
2. 再寫一個 debug function 做為 output 用(原來想寫 OutputDebugString, 哈, 中毒太深):
function debug(msg)
{
document.getElementById(‘output’).innerHtml += “<p>”+msg+”</p>”;
}
3. 接下來就在要輸出變數的地方呼叫這個函數即可, 如:
……
var sData = “123” + “456”;
debug(“sData=” & sData);
……
如此一來便能快速, 又方便, 又不中斷, 又不無瀏器限制的狀況下, 輕鬆將所需的資料秀在頁面上, 相信對於寫 javascript 的程式人員來說, 應該又方便了不少, 當然, 未來若是要將除錯碼移除, 除了將debug(xx)逐行刪除外, 亦可在 debug 下手腳(不寫入 output div), 或是將 output div 隱藏起來, 當然前著為佳囉, 因為可以節省更動 innerHtml 的時間啦.