本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

JavaScript 快速導覽 - 除錯資訊

程式中如果有語法錯誤,編譯式語言如 C 、 C++ 、 Java 等,編譯時編譯器 (compiler) 會直接抓出錯誤,直譯式語言如 Python 、 Ruby 的直譯器 (interpreter) 也會在執行時抓出錯誤,可是 JavaScript 藉由瀏覽器 (browser) 來執行,發生錯誤時,瀏覽器卻是一動也不動。



例如,以下的 Javascript 程式有一個小錯誤
function run() {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var message = "Hello, JavaScript!";
    n.appendChild(document.createTextNode(s));
    c.appendChild(n);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run01.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件開啟
<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>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


我們以 FireFox 打開這份 HTML 文件,連續點擊「RUN」按鈕三次,可以發現瀏覽器一點反應都沒有



這是為什麼呢?因為我們使用一個沒有定義的變數,在程式的第 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 ,程式就可以正常執行了。






沒有留言: