iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

從零開始遲來的Web開發筆記系列 第 30

瀏覽器console.log()外的一些其他用法

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()

https://ithelp.ithome.com.tw/upload/images/20181114/20112470bNCUZqwWJ8.png


上一篇
今日筆記 - Ajax、XMLHttpRequest、JQuery ajax到Fetch API
系列文
從零開始遲來的Web開發筆記30

2 則留言

0
Cheng®
iT邦新手 5 級 ‧ 2019-11-12 16:01:37

Ctrl+F 之道 & 附寫

0
lagagain
iT邦新手 4 級 ‧ 2020-03-10 21:48:06

補個:
https://www.youtube.com/watch?v=Mus_vwhTCq0

這影片裡頭提到更多技巧,可能是新的,可能是之前沒注意到。不管怎樣推薦看下。

突然發現影片時間還比我文章時間早...
只能說以前我都在看ES5之前的規格...... 可能沒注意到.......
(Promise和async/await貌似是ES6?)


現今瀏覽器也大部分支援ES6了,
加上寫了7天搞懂JS進階議題
我也開始大量關注ES6之後的新特性。(ES5之前的東西我應該回不去了...有些看起來真丑)

我要留言

立即登入留言