JavaScript 與 Chrome Console 基本教學

網頁開發者通常是需要長期跟瀏覽器為伍，所以本篇來針對 瀏覽器 Chrome 開發 JavaScript 時常用的幾個習慣說明教學一下！

開發 Client 端的 JavaScript 最常用到的就是 Console，不管是基礎開發者或者資深都會需要要使用這個功能，首先隨便打開一個網頁，滑鼠右鍵有個 “檢查” 的選項，點擊後會出現分割視窗，再選擇 Console；亦或者快捷鍵 Cmd + Option + J(Windows 是 Ctrl + Shift + J) 也可以快速打開 Console。

網頁上按滑鼠右鍵>檢查

選擇 Console 頁面

Console 是做什麼的呢？基本上就是當網頁出現問題時，一些程式訊息都會在這裡呈現，也就是網頁的 “前端執行紀錄”，記住！只有前端！

那，要怎麼在 JavaScript 開發下，使用 Console 呢？

基本上寫過程式的人都知道 “印出” 的功能是很重要的，而 Console 就是可以拿來扮演這樣的角色，以下會用簡單的 JavaScript 演示如何使用 Chrome Console 來 log 訊息！

首先新增 index.html 與 index.js 兩個檔案，並且在 index.html 裡面加入引用 index.js

<script src="index.js" language="javascript" type="text/javascript" ></script>

這樣就可以在本機端開啟 index.html 囉！

打開 index.js，開始幾個 Console 範例，第一個就是印出字串

console.log("Hello World!");

然後儲存離開，重新整理 index.html 後，注意觀察瀏覽器的 Console 上的變化，就可以看到 Hello World 的字串了！

Console 介面印出字串了！

或許你會問，然後呢？

沒有然後，等後面再寫邏輯的時候你就會知道這個有多好用了！

另外，印出訊息除了可以用 console.log 這個語法外，還有 console.info 與 console.error 兩種可以用喔！

兩者差別除了 info 與 error 的意思外，最主要的差別就是顏色，因為在開發大網站時，通常 log 也會特別的多，所以可以利用 console.info 的藍色與 console.error 的紅色字串做識別喔！

所以今天重點就是，在 JavaScript 內，大家可以利用 console.log 來丟出執行到該處的字串！

這對於開發 Debug 可是 很重要！ 很重要！ 很重要！

以上範例 大家可以到 這裡 下載喔！