JS-網站互動設計程式進化之道-ErrorHandling

發表於

JavaScript&JQuery-網站互動設計程式進化之道-Error Handling & Debugging

學習筆記(9) - Error Handling & Debugging

堅韌是成功的一大要素，只要在門上敲得夠久、夠大聲，終會把人喚醒的

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

十、Error Handling & Debugging

ERROR物件

  • Error：所有Error物件的樣本
  • SyntaxError：語法不正確
  • ReferenceError：變數不存在
  • URIError：未正確使用URI函式（字元未跳脫 / ? & # : ; ）
  • TypeError：資料為非預期的型別（不存在的物件或方法）
  • RangeError：數值超出定義範圍
  • EvalError：未正確使用eval()函式
  • NaN：運算使用了非數值

Console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//console.log()
console.info(藍色);
console.warn(黃色);
console.error(紅色);

//console.group()
console.group('Area calculations');            // Start grouping
    console.info('Width ', width);               // Write out the width
    console.info('Height ', height);             // Write out the height
    console.log(area);                           // Write out the area
console.groupEnd();                            // End group

//console.table()
console.table(contacts);                   // Write data content to console

//console.assert(條件, 輸出)
console.assert(this.value > 10, 'User entered less than 10');

Add Conditional Breakpoint

1
2
3
4
5
6
if (area < 100) {
    debugger;             // A breakpoint is set if the developer tools are open
    }

//自訂錯誤訊息
throw new Error('calculateArea() received invalid number');

例外處理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (response) {
    try {                                               //嘗試執行此區段程式碼
        var dealData = JSON.parse(response);              // Try to parse JSON
        showContent(dealData);                            // Show JSON data
    } catch(e) {                                        //發生例外狀況時執行(錯誤訊息)
        var errorMessage = e.name + ' ' + e.message;      // Create error msg
        console.log(errorMessage);                        // Show devs msg
        feed.innerHTML = '<em>Sorry, could not load deals</em>';// Show users msg
    } finally {                                         //此區段無論如何均會執行(導向用)
        var link = document.createElement('a');           // Add refresh link
        link.innerHTML = ' <a href="try-catch-finally.html">reload</a>';
        feed.appendChild(link);
    }
    }