不知有多少人像我一樣，幾年web開發(fā)，無數(shù)js代碼，調(diào)試腳本卻只會alert方法。

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

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

調(diào)試利器--console.log

如今主流瀏覽器（Chrome，IE8及后續(xù)版本，F(xiàn)ireFox，Opera等）都支持控制臺功能。

Chrome：

IE9：

FireFox（需安裝FireBug插件）

當(dāng)在js代碼中調(diào)用Console.log方法時，相應(yīng)的信息就會在控制臺中顯示。相對于alert方法，有三個優(yōu)點：

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

調(diào)試實例：Google Calendar API

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

1. Https協(xié)議。
2. 需提交JSON格式的數(shù)據(jù)。

我并不完全了解Https和Http的區(qū)別，通過操作才知道監(jiān)聽軟件（如Fiddler）攔截不到Https請求的詳細信息，而整個過程是Ajax的形式，結(jié)果就是--任何一個地方出錯，點擊按鈕完全無響應(yīng)，卻不知錯在哪里。

對于第二條，我是第一次碰到要提交JSON格式數(shù)據(jù)，以往碰到的都是返回JSON數(shù)據(jù)。

為了走通整個流程，我做了簡單的測試代碼，三個輸入框分別表示標(biāo)題，開始時間，結(jié)束時間和一個提交按鈕：

js代碼如下，手動構(gòu)造JSON對象tempRes，再發(fā)送到google響應(yīng)的地址：

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
    });
}

然而代碼完成后，點擊按鈕毫無響應(yīng)，于是我就用console.log查看tempRes對象。發(fā)現(xiàn)結(jié)果如下：

圖中可以看出，end屬性為“undefined”，為什么？在確定輸入值格式無誤后發(fā)現(xiàn)，兩個輸入框的id重復(fù)了，錯誤代碼如下：

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

于是，改之，發(fā)現(xiàn)依然有錯，再查！

在google提供回調(diào)方法中，有一個參數(shù)response，但跟其他回調(diào)一樣，參數(shù)往往是個對象，在不知屬性的情況下，無從下手。于是對回調(diào)參數(shù)使用console.log。

function writeResponse(response) {
    console.log(response);
    var creator = response.creator.email;
    var calendarEntry = response.htmlLink;
    …………
}

然后在控制臺中得到以下錯誤信息：

錯誤信息顯示需要登錄，于是添加登錄部分代碼，再測，走通，完成！

我經(jīng)常在編碼出現(xiàn)重復(fù)值、拼錯字之類的小錯，而console.log能讓我快速定位問題。上面的例子中JSON對象屬性只有3個，用alert一個一個查能找到，但如果有一二十個，再用alert就會顯的笨拙。

通過瀏覽器添加斷點調(diào)試Javascript代碼

調(diào)試代碼離不開斷點。在主流瀏覽器中，都可以對javascript代碼添加斷點進行調(diào)試，雖然功能相似，但相對于chrome和firefox，我更喜歡IE多一點，可能是因為用慣了VS的緣故。

IE的調(diào)試界面如下圖，右下方的輸入框可以方便快捷的查看當(dāng)前上下文的數(shù)值信息。類似VS在調(diào)試過程中的“Immediate Window”。

小技巧-在VS中編寫Js獨立文件時添加智能提示

智能提示可以很大程度上減少拼寫錯誤，以提高效率，所以我一旦碰到寫代碼沒有智能提示就渾身不自在。但每當(dāng)我創(chuàng)建獨立的js文件又要用到j(luò)Query，Knockout之類的框架時，往往不敢下手，就因為沒有智能提示。比如Knockout中的一個常用方法dependentObservable：

this.total = ko.dependentObservable(function () {
            return this.unitPrice * parseInt(this.quantity());
        }, this);

這個方法名太長，不拼錯才奇怪，而一旦拼錯，往往很難定位。

因此這里的技巧就是：在js開頭加入以下代碼，讓其支持相應(yīng)框架的智能提示：

///
///
///

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

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

結(jié)語

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

 

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