知識文章JavaScript 與 Chrome Console 基本教學

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 可是 很重要! 很重要! 很重要!

 

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

張貼者:吳政賢發佈。
瀏覽人數:150 人