JavaScript 輸出教學：console.log 與 alert 的差別
剛接觸 JavaScript 一定要懂得輸出，才能找出 Bug 發生在哪裡。輸出是最原始、也最好用的除錯手段：把值印出來，確認程式真的跑到這裡，而且變數真的是您想的那個值。
window.alert()
把要顯示的內容放置括號之中 ()，便會以彈窗的方式輸出，並等待使用者關閉。它也是初學者最容易使用的 JavaScript 內建方法。
window.alert(7533967);alert(7533967);小提醒
window 是瀏覽器的全域物件，alert() 本來就掛在它身上，所以省略 window. 也能運作。這件事在 this 是什麼 會再談一次。
console.log()
把要顯示的內容放置括號之中 ()，可以在瀏覽器的主控台觀察到。按 F12 打開開發者工具，切到 Console 分頁就能看到結果。
console.log(7533967);它也可以一次印出多個值，用 , 分隔即可，實務上很常拿來標示這行輸出是誰：
const name = 'Away';
// name: Away
console.log('name:', name);window.alert() 與 console.log() 不同之處
- 輸出的地方不一樣。
window.alert()會暫時中斷程式的執行，必須手動去點選 確定 才能繼續下一步；而console.log()則不會。- 初期，要輸出一些簡單變數
window.alert()還可支援。但中期，要輸出複雜變數還是得使用console.log()。
| window.alert() | console.log() |
|---|---|
| 在頁面上輸出 | 在主控台輸出 |
| 會堵塞 | 無堵塞 |
| 支援簡單變數 | 支援簡單、複雜變數 |
下面這個例子就能看出差距，同一個物件用 alert() 只會得到一段沒有意義的文字：
const user = { name: 'Away', age: 20 };
// [object Object]
alert(user);
// { name: 'Away', age: 20 }，還能在主控台展開觀察
console.log(user);注意
alert() 會把內容轉成字串再顯示，所以物件、陣列 這類複雜資料一律變成 [object Object]。除錯請一律用 console.log()。
console 家族的其他方法
| 方法 | 用途 |
|---|---|
console.warn() | 以警告樣式輸出，主控台會顯示黃色底 |
console.error() | 以錯誤樣式輸出，並附上呼叫堆疊 |
console.table() | 把陣列或物件排成表格，觀察多筆資料很方便 |
console.dir() | 以物件屬性的形式檢視，印 DOM 節點時特別有用 |
console.time() / console.timeEnd() | 量測兩點之間的執行耗時 |
const list = [
{ name: 'Away', age: 20 },
{ name: 'Ivy', age: 18 },
];
// 以表格呈現，欄位為 name 與 age
console.table(list);
console.time('計時');
// 中間執行一些事情
console.timeEnd('計時');常見問題
console.log 的內容要去哪裡看？
在瀏覽器按 F12 打開開發者工具，切到 Console（主控台）分頁就會看到。輸出的每一行還會標示它來自哪一支檔案的第幾行。
alert 與 console.log 該用哪一個？
除錯請一律用 console.log()。alert() 會中斷程式執行、需要手動關閉，而且只能顯示字串，遇到物件會變成沒有意義的文字。
為什麼 console.log 印出的物件內容和當下不一樣？
主控台展開物件時讀的是當下的最新狀態，若之後程式又改了同一個物件，展開時看到的就是改過的值。想留下當下快照，可以印出 JSON.stringify() 後的字串。
console 還有哪些常用方法？
常用的有 console.warn() 與 console.error() 顯示警告與錯誤、console.table() 把陣列與物件排成表格、console.dir() 檢視物件屬性，以及 console.time() 與 console.timeEnd() 量測一段程式的耗時。
正式上線的網站可以留著 console.log 嗎？
建議清掉。留著雖然不會讓網頁壞掉，但可能洩漏內部資料結構，數量太多也會影響效能，實務上多半交由打包工具在建置時自動移除。
