不知有多少人像我一樣，幾年web開發，無數js代碼，調試腳本卻只會alert方法。
不知有多少人像我一樣，一個簡單方法，開發中卻需不斷alert以確保數值正確，一步一alert，處處都alert，每次都alert到瀏覽器看不下去，跳出來阻止。
如果你確實苦逼如我，今天看到這篇文章算你福氣啦，哥現身說法，教你如何擺脫alert的噩夢。
調試利器--console.log
如今主流瀏覽器（Chrome，IE8及后續版本，FireFox，Opera等）都支持控制台功能。
Chrome：
IE9：
FireFox（需安裝FireBug插件）
當在js代碼中調用Console.log方法時，相應的信息就會在控制台中顯示。相對於alert方法，有三個優點：
- 如參數為一個對象，則可在控制台查看所有屬性信息。
- 類似C#中的string.Format功能，不需字符串拼接。
- 無彈窗，即使不刪除，也不會影響頁面體驗。
調試實例：Google Calendar API
我最近在整合googleAPI的過程中碰到一個問題，google API提交信息需要兩個條件：
- Https協議。
- 需提交JSON格式的數據。
我並不完全了解Https和Http的區別，通過操作才知道監聽軟件（如Fiddler）攔截不到Https請求的詳細信息（通過Fiddler設置可以攔截到HTTPS信息，但個人感覺所得信息並無價值），而整個過程是Ajax的形式，結果就是--任何一個地方出錯，點擊按鈕完全無響應，卻不知錯在哪里。
對於第二條，我是第一次碰到要提交JSON格式數據，以往碰到的都是返回JSON數據。
為了走通整個流程，我做了簡單的測試代碼，三個輸入框分別表示標題，開始時間，結束時間和一個提交按鈕：
js代碼如下，手動構造JSON對象tempRes，再發送到google響應的地址：
function makeRestRequest() { var tempRes = { "summary": $("#summary").val(), "start": { "dateTime":$("#start").val() // "2012-03-21T10:00:00.000+08:00" }, "end": { "dateTime":$("#end").val() //"2012-03-21T11:00:00.000+08:00" } }; console.log(tempRes); gapi.client.request({ 'path': '/calendar/v3/calendars/primary/events', 'method': 'POST', // 'body': resource, 'body': tempRes, 'callback': writeResponse }); }
然而代碼完成后，點擊按鈕毫無響應，於是我就用console.log查看tempRes對象。發現結果如下：
圖中可以看出，end屬性為“undefined”，為什么？在確定輸入值格式無誤后發現，兩個輸入框的id重復了，錯誤代碼如下：
<tr> <td>Start:</td> <td><input type="text" id="start" name="start"/></td> </tr> <tr> <td>End:</td> <td><input type="text" id="start" name="end"/></td> </tr>
於是，改之，發現依然有錯，再查！
在google提供回調方法中，有一個參數response，但跟其他回調一樣，參數往往是個對象，在不知屬性的情況下，無從下手。於是對回調參數使用console.log。
function writeResponse(response) { console.log(response); var creator = response.creator.email; var calendarEntry = response.htmlLink;
…………
}
然后在控制台中得到以下錯誤信息：
錯誤信息顯示需要登錄，於是添加登錄部分代碼，再測，走通，完成！
我經常在編碼出現重復值、拼錯字之類的小錯，而console.log能讓我快速定位問題。上面的例子中JSON對象屬性只有3個，用alert一個一個查能找到，但如果有一二十個，再用alert就會顯的笨拙。
通過瀏覽器添加斷點調試Javascript代碼
調試代碼離不開斷點。在主流瀏覽器中，都可以對javascript代碼添加斷點進行調試，雖然功能相似，但相對於chrome和firefox，我更喜歡IE多一點，可能是因為用慣了VS的緣故。
IE的調試界面如下圖，右下方的輸入框可以方便快捷的查看當前上下文的數值信息。類似VS在調試過程中的“Immediate Window”。
小技巧-在VS中編寫Js獨立文件時添加智能提示
智能提示可以很大程度上減少拼寫錯誤，以提高效率，所以我一旦碰到寫代碼沒有智能提示就渾身不自在。但每當我創建獨立的js文件又要用到jQuery，Knockout之類的框架時，往往不敢下手，就因為沒有智能提示。比如Knockout中的一個常用方法dependentObservable：
this.total = ko.dependentObservable(function () { return this.unitPrice * parseInt(this.quantity()); }, this);
這個方法名太長，不拼錯才奇怪，而一旦拼錯，往往很難定位。
因此這里的技巧就是：在js開頭加入以下代碼，讓其支持相應框架的智能提示：
///<reference path="~/Scripts/knockout.js"/>
///<reference path="~/Scripts/jquery-1.6.4.js"/>
///<reference path="~/Scripts/jquery.linq.min.js"/>
加入這些代碼后，再編碼，心里就有底氣了：
這一段跟js調試無關，但是通過智能提示減少代碼出錯率，也算是有所幫助。
結語
以上是我的個人經驗分享，記述着我擺脫alert的過程，我相信還有其他更好的js調試方法，如有不對的地方，歡迎批評指出。
注：園友jndream、bluescreen提示，console.log在舊版本的瀏覽器中會報錯，因此要記得刪除調試信息。