例如，以下的 Javascript 程式有一個小錯誤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function run() { var c = document.getElementById("content"); var n = document.createElement("p"); var message = "Hello, JavaScript!"; n.appendChild(document.createTextNode(s)); c.appendChild(n);}/* 《程式語言教學誌》的範例程式 檔名：run01.js 功能：示範 JavaScript 程式 作者：張凱慶 時間：西元 2010 年 11 月 */ |
利用以下的 HTML 文件開啟
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html><head><title>JavaScript Demo</title><script src="run01.js" type="text/javascript"></script></head><body><input id="b" type="button" value="RUN" onclick="run();"><div id="content"></div></body></html><!-- 《程式語言教學誌》的範例程式 檔名：jsexample.html 功能：示範 JavaScript 程式 作者：張凱慶 時間：西元 2010 年 11 月 --> |
我們以 FireFox 打開這份 HTML 文件，連續點擊「RUN」按鈕三次，可以發現瀏覽器一點反應都沒有
這是為什麼呢？因為我們使用一個沒有定義的變數，在程式的第 5 行
5 | n.appendChild(document.createTextNode(s)); |
這裡的變數 s 沒有用關鍵字 (keyword) var 宣告及給值，因此瀏覽器執行 JavaScript 程式時，並不認識 s 這個識別字 (identifier) ，所以執行時發生錯誤而中斷沒有繼續執行。
FireFox 的選單中的「工具」可以找到「錯誤主控台」
打開「錯誤主控台」，我們可以看到如下的視窗
「錯誤主控台」為 FireFox 所提供網頁開啟所出現的錯誤資訊，因此可以用為除錯的參考。
Google Chrome 瀏覽器提供更方便的開發網頁的介面，打開 Google Chrome ，在「檢視」選單中可以找到「開發人員選項」
子選單裡頭有個「JavaScript 控制台」
打開「JavaScript 控制台」， Google Chrome 瀏覽器下方便出現控制介面
底下以 > 開頭的地方，這是 Google Chrome 瀏覽器所提供的 JavaScript 直譯器，可於此測試程式碼。
Element 分頁是 HTML 文件檔案的原始碼， Scripts 分頁則是 JavaScript 程式檔案的原始碼
點擊「RUN」，底下會直接找到錯誤的地方
我們在底下的直譯器介面打入測試的程式碼，也就是從錯誤開始之後的程式碼
將變數 s 改回 message ，程式就可以正常執行了。
沒有留言:
張貼留言