2020/03/10 update

下面二樓留言的影片也可以看下。
因為我先留言了，補上來感覺也很怪。各位看官看完文章滑下去看吧！

在瀏覽器寫javascript時，可能會用alert()跳出訊息，也可能用console.log來印出訊息。後者的方式比較溫和，也比較好用，Node.js的開發上也會用到。不過瀏覽器裡的console可不是只有單純console.log(msg)的方式，今天就來介紹幾個而外的用法。

Console.log的其他參數

console.log除了可以像是console.log(msg[,msg1,msg2...])接受多個訊息輸出以外，也有類似C/C++的控制字元%d、%f、%s等等。所以如果要印出Hello World，可以有以下寫法：

• console.log("Hello World")
• console.log("Hello"," World")
• console.log("%s", "Hello World")

此外控制字元還有一個蠻特殊的%c，在C裡面也是表示類別的字元(chat)，和%d表示數位數字(digital)、%f表示浮點數(float)、%s表示字串(string)一樣。但是瀏覽器裡的%c，與其對應的是一個CSS格式的字串，所以可以這樣用：

console.log("%cHello %cWorld", "color:red;", "color:blue;background:yellow")

上面的輸出結果應該會包含紅色字的Hello，和黃底藍字的World。(用法和Linux的echo color有點像呢)

level

記錄訊息(log message)又分等級的，在瀏覽器預設已經分成info、warn、error和debug四個等級。console.debug()是console.log()的別稱，不過我在chromium裡測試的結果，兩者行爲有點差別。(依瀏覽器，可能視作不同等級)

想到之前還會配合上面控制字元自己搞出console.red()、console.blue()、console.yellow()等東西呢。不過等級可以作爲訊息過濾的方式之一，firefox和chrome的開發工具都有提供。

console.clear()

試過console.log(("%cHello %cWorld", "color:red;", "color:blue;background:yellow")、console.log()、console.info()、console.warn()、console.error()和console.debug()以後，顯示的東西也不少了。接下來可以用console.clear()清空。(不過我之道的是firefox和chrome也都有直接清空的按鈕就是。但是這在自己寫程式完後發佈，可以在處理完所有訊息後清楚，當然還有一種做法是直接附寫掉console.log等用法，留太多訊息不一定好)

console.dir()和dirxml()

dir(obj)可以查看物件的屬性。dirxml()可以顯示資料內容。試試console.dir(document)和console.dircxml(document)

console.table()

有時候用table顯示資料比較好看。先來看範例：

console.table(["apples", "oranges", "bananas"]);

恩，來玩點其他用法～

想知道console的所有method?

想知道console的所有method?可以使用上面說過的console.dir(console)，不過這不好看，用console.table(console)漂亮多了。

console.image()

想顯示圖片？沒問題，用console.image(url)。阿不過得先引入console.image：

<script src="https://cdn.rawgit.com/adriancooney/console.image/c9e6d4fd/console.image.min.js"></script>

顯示看看iThome幫幫忙的LOGO(可能要使用chrome才能正確顯示):

console.image("https://ithelp.ithome.com.tw/storage/image/logo.svg")

群組

console.group()和console.groupEnd()可以控制輸出自動縮排，還亦可以摺疊內容。同樣的還有一個console.groupCollapsed()，不過預設內容是摺疊的，透過以下範例可能比較好瞭解：

console.group()
console.log("Hello")
console.log("World")

console.group()
console.log("World")
console.log("Hello")

console.groupEnd()
console.groupEnd()


console.groupCollapsed()
console.log("Good Bye")
console.log("Everyone")
console.groupEnd()