【補充說明】：這是一篇惡搞 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整合進我們的工作流中？下面我提供了一個模板，每次我的程式碼就從這個模板開始。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 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, 就輸入：
|
1 |
$ vi template.js |
如果你在使用emacs，輸入下面的內容：
|
1 2 |
$ sudo apt-get remove emacs $ vi template.js |
然後把你的程式碼放在各種alert輸出之間， 執行程式碼並檢視每一行執行之後的x值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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除錯方式打個照面吧。