JavaScript基礎知識-使用Firefox進行代碼的調試(Debug)
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.JavaScript源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Debug</title> <SCRIPT type="text/javascript"> alert("name = "+ my_name + ", age = " +age); var my_name = "Jason Yin"; var age = 18; address = "北京"; function sayHello(name,age){ alert("I'm %s, and I'm %d years old.",name,age); } alert("name = "+ my_name + ", age = " +age); </SCRIPT> </head> <body> </body> </html>
二.Firefox瀏覽器中添加斷點
1>.為代碼添加斷點的方式
斷點的作用:
顧名思義，斷點指的是代碼執行過程中可以斷開的點，意思是代碼執行過程中，當代碼要執行到指定斷點時會停止執行，而是將后續的執行過程交由程序員來控制。
斷點的作用主要是程序員用來做代碼調試的一種手段。
Firefox瀏覽器添加斷點的三種方式:
(1)直接在行號前單機鼠標(左鍵)即可完成斷點的添加(我推薦使用這種方式，因為它操作起來是最簡單的);
(2)直接在行號前右擊鼠標，如下圖所示，選擇"添加斷點"即可;
(3)使用快捷鍵的方式添加斷點，這無需鼠標移動到指定的行號，我們可以單擊鼠標在代碼位置，這樣光標就會移動到具體的位置，使用"Ctrl + B"可以在光標所在的行前添加斷點;
2>.按照上面的方式為調試的代碼添加多個斷點，如下圖所示
三.添加監視器表達式
1>.添加"監視器表達式"方法
監視器表達式的作用:
主要幫助程序員用來監視指定的標識符。當然，我們不用監視器表達式也可以實現對指定標識符的監控，這一切都是為了方便。
添加監視器表達式的方法:
(1)鼠標左鍵雙擊選擇指定的標識符;
(2)選擇指定標識符后，右擊鼠標，選擇"添加監視器表達式"，如下圖所示
2>.我們可以添加多個監視器表達式，如下圖所示
3>.移除已添加的"監視器表達式"
四.重新刷新頁面開始調試
1>.觀察瀏覽器的"范圍"
如下圖所示，由於變量"my_name"和"age"使用了var關鍵字進行定義的，說明該標識符會被生命提前，當然使用function關鍵字定義的函數這里也得到了聲明提前。 關於變量和函數的聲明提前，在我以前的筆記已經分享過啦，這里就不再贅述了，感興趣的小伙伴可以參考我以前的筆記。 博主推薦閱讀: https://www.cnblogs.com/yinzhengjie/p/14022267.html
2>.如下圖所示，點擊第三個按鈕，會執行一行代碼
3>.如下圖所示，繼續點擊第三個按鈕，會繼續執行一行代碼(注意觀察："范圍"和"監視表達式"這兩個字段的標識符的值喲~)
4>.如下圖所示，繼續點擊第三個按鈕，會繼續執行一行代碼(注意觀察："范圍"和"監視表達式"這兩個字段的標識符的值喲~)
5>.如下圖所示，繼續點擊第三個按鈕，會繼續執行一行代碼(注意觀察："范圍"和"監視表達式"這兩個字段的標識符的值喲~)
6>.如下圖所示，繼續點擊第三個按鈕，會繼續執行一行代碼(注意觀察："范圍"和"監視表達式"這兩個字段的標識符的值喲~)
五.小試牛刀(如下圖所示，請說明原因為什么第9行和第20行代碼輸出的內容不一致呢？提示: 參考上圖！)
