昨天我們中斷點講到了一半，今天我們就接著一起來看在中斷點作用後，我們可以做些什麼。

使用中斷點來除錯

請重覆昨天的步驟，並使用官方的 Demo 來打開中斷點，如果你的步驟都正確的話，你的畫面應該會像下面：

圖 1: 在 Demo 網頁上作用中的中斷點

在這個狀態下我們可以做很多事，首先在畫面上你可以看到的是在這個 debugger 前的變數數值已經都直接顯示在各變數的後面了。
像我輸入在 Number 1 的值是 1，Number 2 的值是 2，所以他們的值各是 1 跟 2，而我們也可以看到變數 sum 的值是 12，
咦？怎麼會是 12 呢？因為這個官方 Demo 是來拿做除錯 JS 的，所這是裡面的臭蟲，我們晚點會一起來修正它，不過在那之前，我們先來看一下其他功能。

圖 2: 中斷點作用時，變數值會出現在變數後面

如果你現在把滑鼠移到各個變數上，它會出現變數當下的值，如果你移到方法上，像是 getNumber1()，它告訴你它是一個方法，你可以甚至知道這個方法裡面的程式，及它所宣告的位置 (行號)。如果你移到 label.textContent 的 label 上，你會發現這個變數有超多屬性的，因為這個一個 DOM 元素，你可以在行號 43 看到它的宣告。

圖 3: 移到 getNumber1() 上所得到的資訊

圖 4: 移到 label 上所得到的資訊

使用開發者工具的中斷點功能

這邊我們要提一下變數的作用域，什麼意思呢？我們剛剛所設的中斷點是有變數作用域的，我們來看一個例子比較好解釋：

const name = 'Joshua';

debugger;

const age = 18;
const origin = 'Kinmen';

當中斷點停在這個例子中的時候，我們的程式是"真的"只執行到 debugger 這裡。所以如果我們一樣用滑鼠移動到變數 age 及 origin 上，它們的值會都是 undefined，還沒有值。好，我們現在就用我們的 Demo 來試試看，但是這次我們不再用 debugger 這個關鍵字來設置中斷點，我們要用開發者工具所提供的。請把我們先前設置的中斷點刪除(你可以直接重新整理頁面就可以了)。然後用滑鼠移動到程式碼行號 29 行的位置，並在它的行號上用滑鼠左鍵點一下，這時候它應該會出現一個藍色的箭頭像下圖：

圖 5: 透過開發者工具設置的中斷點

這就是我們新設置好的中斷點，現在我們一樣在 Number 1 跟 Number 2 這兩個輸入框裡輸入任意的數字，並按下 Add Number1 and Number2 這個按鈕。你的程式就會執行到這個中斷點，並停在 29 這裡。這樣是不是比剛剛這樣使用方便多了？

移除中斷點的方式：在要移除的中斷點的行號上再用滑鼠左鍵點一下就可以移除掉它

圖 6: 在 29 行作用中的中斷點

現在如果你檢視中斷點那一行的變數 addend1 ，它的值會是 undefined，因為我們的程式在跑到這一行後就中斷了，所以 addend1 這個變數的值還沒有指定。同樣的，而接續後面的變數也是相同，都是 undefined，除了 label ，因為在呼叫這個 updateLabel 方法前， label 就已經在第 41 行宣告過了。

圖 7: 在中斷點後的變數值是 undefined

這邊我們要提一下，雖然使用 debugger 是沒有比直接在開發者工具裡設置中斷點快速，但是常常我們是需要使用 debugger 在我們的原始碼中，這有有兩個主要的原因：

• 在我們的原始碼中，我們知道我們想設置中斷點的程式碼位置，當我們在大專案中時，有上百個檔案，直接下 debugger 在我們想要中斷的地方是很快速並且準確的。你不用再跑來開發者工具，尋找這個檔案，然後再來下中斷點。
• 有些中斷點位置是不能直接透過開發者工具來下的，我們今天所下的中斷點的位置剛好是在按鈕事件裡，所以在下完中斷點，然後再點擊按鈕後，我們的中斷點就會出現。但如果你下在別的位置，例如在第 42 行，這是沒有作用的，因為在我們設置中斷點的當下我們的程式已經執行完了。

小結

今天我們一起看了另一種設定中斷點的方法，也就是透過開發者工具直接設定在原始碼面版中，也知道在中斷點作用的當下，變數的值是可以讓我們觀察的。明天我們要介紹更多除錯的工具，並且學習怎樣去跟控制台面版做整合。明天見！