iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0

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

使用中斷點來除錯

請重覆昨天的步驟,並使用官方的 Demo 來打開中斷點,如果你的步驟都正確的話,你的畫面應該會像下面:
作用中的中斷點擷圖
圖 1: 在 Demo 網頁上作用中的中斷點

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

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

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

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

DOM 元素擷圖
圖 4: 移到 label 上所得到的資訊

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

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

const name = 'Joshua';

debugger;

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

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

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

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

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

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

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

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

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

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

小結

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


上一篇
原始碼面版 - 使用中斷點 1
下一篇
原始碼面版 - 在中斷點間移動及觀察變數
系列文
認識 Chrome 開發者工具30

尚未有邦友留言

立即登入留言