javascript 幾種除錯方式

看到網頁呈現不出你要的樣子，又找不到哪裡才有錯誤嗎？

斷點除錯

• 先叫出 Google chrome dev tools 網頁除錯工具 :
  Windows 按 「F12」、Mac 同時按 「alt」 +「 cmd」+「I」。
• 在 Sources 中找有問題的檔案開啟。
• 設置斷點：點你覺得有問題、沒出現效果的 js 行數數字。
• 整理網頁 Windows 同時按「ctrl」+ 「R」Mac 同時按 「cmd」+ 「R」，或是在網頁中點右鍵按 「重新整理」。

• 有兩種除錯按鈕可按：
  • 右上角黃框：只跑有設斷點的該行數程式，再按一次是一次跑完到下一個斷點之間的程式。
  • 右上角紅框：跑斷點跟斷點之間的行數，每按一次跑一行。
    
• 顯示跑程式得到的結果：
  • 最右側 Script 欄位：可以看到剛跑完第 10 行 price1 結果是 5 。
  • 最右側 Watch 欄位：可以按 + 號新增你想觀察的值 。

• 等斷點跑完或是有時候不用設斷點，最下面的 Console 就會跟你說哪邊有錯誤了。
• 這篇錯誤範例來說，他說 total 沒有定義，那就要回去看 total 有沒有被宣告好，原因是宣告 tota1 最後的字母打錯字囉！

---