不知有多少人像我一樣，幾年web開發，無數js代碼，調試腳本卻只會alert方法。

不知有多少人像我一樣，一個簡單方法，開發中卻需不斷alert以確保數值正確，一步一alert，處處都alert，每次都alert到瀏覽器看不下去，跳出來阻止。

如果你確實苦逼如我，今天看到這篇文章算你福氣啦，哥現身說法，教你如何擺脫alert的噩夢。

調試利器--console.log

如今主流瀏覽器（Chrome，IE8及后續版本，FireFox，Opera等）都支持控制臺功能。

Chrome：

IE9：

FireFox（需安裝FireBug插件）

當在js代碼中調用Console.log方法時，相應的信息就會在控制臺中顯示。相對于alert方法，有三個優點：

1. 如參數為一個對象，則可在控制臺查看所有屬性信息。
2. 類似C#中的string.Format功能，不需字符串拼接。
3. 無彈窗，即使不刪除，也不會影響頁面體驗。

調試實例：Google Calendar API

我最近在整合googleAPI的過程中碰到一個問題，google API提交信息需要兩個條件：

1. Https協議。
2. 需提交JSON格式的數據。

我并不完全了解Https和Http的區別，通過操作才知道監聽軟件（如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開頭加入以下代碼，讓其支持相應框架的智能提示：

///
///
///

加入這些代碼后，再編碼，心里就有底氣了：

這一段跟js調試無關，但是通過智能提示減少代碼出錯率，也算是有所幫助。

結語

以上是我的個人經驗分享，記述著我擺脫alert的過程，我相信還有其他更好的js調試方法，如有不對的地方，歡迎批評指出。

 

注：園友jndream、bluescreen提示，console.log在舊版本的瀏覽器中會報錯，因此要記得刪除調試信息。