台灣的Web工程師

Javascript，HTML中三大元素的最後一個，也是唯一需要寫程式的一個，如果沒有Javascript處理程式邏輯的話，網頁就無法跟使用者有互動效果。

Javascript的初學者，常常都會花一點時間，上網找看看有沒有Javascript專用的IDE開發工具，例如寫JAVA可以的Eclipse、NetBean等工具，寫.NET的Visual Studio工具一樣。

為什麼要這些工具，原因是這些工具不但方便工程師進行程式開發，更重要的是，它整合了Debug功能在裡面，工程師透過這些IDE，可以簡單的進入Debug模式。不過通常上網搜尋的結果是失望的。

這很讓工程師傷腦筋，因為它沒有一個整個開發的工具，所以初學Javascript的人，都是拿筆記本之類的程式；雖然一樣可以寫出Javascript程式，但最重要的一個功能：Debug，卻是無法使用。

但是自從Chrome出現後，這個問題就不再是問題，因為利用Chrome，Javascript也可以進入Debug模式了，下方就讓我們來示範怎麼利用Chrome的功能，在Javascript下中斷點吧。

下方的範例是自己寫的很簡單的小程式，功能是將0~4印在console裡。

在上方的程式，我們可看到程式會印出資料在Console中，但是Console又在那裡呢？我們先透過下列的示範，將Console視窗打開。

開啟Chrome的Console視窗

1. 在下圖滑鼠的位置點一下，之後在跳出視窗中，點一下第二行的Show console，即可開啟Colsole視窗；也看到Chrome將對應的快速鍵寫在旁邊，所以其實可以直接按「Esc」按鍵將Console視窗打開。

2. 下圖是將Console開啟後的結果，可以看到程式印出的資料。

在Javascript中下中斷點，並將程式停在中斷點

開出Console視窗後，就讓我們來下Javascript的中斷點吧。

1. 請依照下圖的1、2、3的操作順序，設下中斷點。

• 中斷點只能下在Sources的頁籤上（就是上圖的第一步），因為滑鼠右鍵的「檢查」功能，會幫使用者帶到Elements頁籤，所以很多人會在Elements的頁籤上試著下中斷點，這是初學者常犯的錯誤。

2. 設定好中斷點後，接下來就是想辦法讓程式執行，以本例來說，程式是在讀取網頁後執行的，所以只要重新整理網頁即可。這裡注意的是，重新整理網頁後，中斷點不會消失，下圖是重新整理網頁後所看到的畫面。

重新整理網頁後，可以看到程式停在我們設定中斷點的地方，有沒有很感動啊！？困擾我們多時的Javascript Debug，就這樣被Chrome解決了。

剩下的就是一般在Debug中常用的功能，讓我們大概來回憶一下：

上圖的功能鍵可以在中斷點的右方視窗中看到，四個功能分別是：

1. 跳到下一個中斷點。

2. 跳到下一行。

3. 若這一行程式有呼叫function的話，進入到呼叫的function，沒有的話跳到下一行。

4. 離開程式的function，並停在呼叫程式的位置（回上一個Stack）。

這是很基本的Debug功能，基本上只要大家多試幾次就可以瞭解它的意義了。

在Console中執行程式

除了中斷點之，Chrome還有一個很強的Console可以使用。

Console不單單是讓程式輸出資料而己，它也可以接受程式的輸入，下方我們來示範的Console的一些用法。

• 直接輸入變數，得出結果。

• 上圖程式仍停留在中斷點，此時的i=0。

• 輸入程式後執行。

• 直接呼叫已宣告的程式。

• 通常直接呼叫程式會配合中斷點來使用，方便Debug。

• 查看Javascript的Error

這邊我把程式碼改了，讓它可以出錯；而當我的Javascript的程式出錯時，問題顯示也是在Console中，而且在問題的右方還有超聯結，點選可以直接跳到出問題的程式碼。這裡有一個重點要注意，那就是Console雖然可以執行程式，但是無法下中斷點。

這些是最基本的操作，不過在某些特殊的情況要下，Chrome的Source會找不到對應的文件，所以無法下Debug的中斷點，下一篇我們來談談要如法處理這類的狀況。