惡搞：實時除錯JavaScript

　　【補充說明】：這是一篇惡搞 JS 的文章。原文副標題是“How a single line of code saved America™”。作者 Jordan Scales 在文章最後還說了一句：“Jordan Scales 是一位 Web 開發者，被他媽媽評為矽谷第二厲害的年輕工程師。”

　　你寫了一堆JavaScript程式碼，但執行的時候卻出問題了。你抓耳撓腮卻始終找不到有問題的div。最後你放棄了，刪除所有的程式碼從頭再來。

　　這種情況我也遇到過，Facebook遇到過， Google遇到過， Yahoo正在經歷。這是人生的一部分，但你如果仔細思量，或許有更好的辦法。

　　本教程將向你展示如何找到JavaScript的bug，避免你清空程式碼。

　　用到的工具

　　整合開發環境或者說IDE，比如微軟的Visual Studio給開發人員提供了一系列工具諸如語法高亮，程式碼自動完成以及培養你的耐心。然而這其中最重要的特性就是除錯工具。

Visual Studio 2014截圖

　　許多IDE支援斷點，能夠讓你暫停程式執行並實時檢視變數。

　　由於JavaScript的核心設計理念: bare-metal development和togetherness, 它並沒有提供IDE和炫酷的斷點工具， 但它支援特性複製。

　　讓我來中“斷”一下，但“點”在哪兒？（原文：Give me a break, what’s the point?）

　　首先讓我們來賞析一下這個高大上的標題。是什麼讓斷點如此有價值？那首先來看一下下面的程式碼：

　　然後冥想一下：“如果有辦法能讓我在指定時間檢視x的值就好了”。辦法嘛也是有的，那就是alert。

　　alert命令能讓程式產生實時狀態更新 – 比如 “ Twitter for JavaScript”。下面就是我的網銀頁面的例子：

　　通過這種方式，我們就能記錄變數的值並檢查它們是否符合預期。不用再去猜了，事實擺在眼前。

　　我們如何能吧alert整合進我們的工作流中？下面我提供了一個模板，每次我的程式碼就從這個模板開始。

// check that JavaScript is enabled
1 + 1 == 2;

alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);

　　要使用這個模板其實很簡單，將它儲存為template.js並用你喜歡的文字編輯器開啟。如果你在用vim, 就輸入：

$ vi template.js

　　如果你在使用emacs，輸入下面的內容：

$ sudo apt-get remove emacs
$ vi template.js

　　然後把你的程式碼放在各種alert輸出之間， 執行程式碼並檢視每一行執行之後的x值。

x = 5;
alert(x);
x += 5 + 7;
alert(x);
function multiplyX(y) {
  x = x * y;
}
alert(x);
multiplyX(999999);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);
alert(x);

　　到此你應該已經具有一個響應式的基礎程式碼，它在每一行執行後提示x的值。 有人說不要使用x? 你應該使用，因為編譯器針對它進行了優化。

　　跟bug來個一刀兩斷吧，跟新的JavaScript除錯方式打個照面吧。

　　原文連結： Jordan Scales   翻譯： 伯樂線上 - 梧桐