# [JS30] Day.9 14 Must Know Dev Tools Tricks
###### tags: `JS30`
## 任務 Task
學習 14 種常用的 `console` 用法。

==完成時間：0.3hr==

## 筆記 Note

### <font color=#337EA9>控制字元 `%s` `%c` `%d`</font>
* 用法：

console.log(`hello %s`,"world");//%s 文字控制字元
console.log(`I am %d years old`,12);//%d: 數字控制字元
console.log(`%cI am green`,"color: green;background: black");
//%c: 樣式控制字元

### <font color=#337EA9>Console message</font>
* 功用：用於 `debug` 或是檢查程式碼的好工具。

console.info('This is info');//藍色驚嘆號，不過chrome不會顯示出來
console.warn('this is warn');
console.error('this is error');

### <font color=#337EA9>console.assert()</font>
* 用法：如果判斷式為 `false` 則顯示錯誤訊息，為 `true` 則不會顯示。

console.assert(1 > 2,"This is false");

### <font color=#337EA9>console.clear()</font>
* 用法：清除控制台內容。
### <font color=#337EA9>console.dir() console.dirxml()</font>
* console.dir(element)：可以看見物件屬性。
* console.dirxml(element)：可以看見物件內容。
### <font color=#337EA9>console.group console.groupEnd()</font>
* 用法：可以控制輸出自動縮排及摺疊內容。
* `console.groupCollapsed` 為預設以摺疊。

console.group();
console.log('hello')
console.log('world')
console.groupEnd();

### <font color=#337EA9>console.count()</font>
* 用法：設定計數器，計算內容出現次數。
### <font color=#337EA9>consoele.time()</font>
* 用法：設定計時器，計算所花時間。
* 用 `console.timeEnd` 來結束計時。

let i = 100;
console.time();
while(i > 0){
    i--;
    console.log(i);
}
console.timeEnd();//計算印出從100到0所需時間。

### <font color= #337EA9>console.tabel()</font>
* 實用！！
* 可以將 `array` `object` 印出表格。

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
console.table(dogs);


## 連結
[MDN：console](https://developer.mozilla.org/zh-TW/docs/Web/API/Console)