---
# System prepended metadata

title: '[JS30] Day.9 14 Must Know Dev Tools Tricks'
tags: [JS30]

---

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

==完成時間：0.3hr==

## 筆記 Note

### <font color=#337EA9>控制字元 `%s` `%c` `%d`</font>
* 用法： 
```javascript=
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: 樣式控制字元
```
![](https://i.imgur.com/1BwSIxy.png)
### <font color=#337EA9>Console message</font>
* 功用：用於 `debug` 或是檢查程式碼的好工具。
```javascript=
console.info('This is info');//藍色驚嘆號，不過chrome不會顯示出來
console.warn('this is warn');
console.error('this is error');
```
![](https://i.imgur.com/IxP7evp.png)
### <font color=#337EA9>console.assert()</font>
* 用法：如果判斷式為 `false` 則顯示錯誤訊息，為 `true` 則不會顯示。
```javascript=
console.assert(1 > 2,"This is false");
```
![](https://i.imgur.com/V5toeLt.png)
### <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` 為預設以摺疊。
```javascript=
console.group();
console.log('hello')
console.log('world')
console.groupEnd();
```
![](https://i.imgur.com/swCucvI.png)
### <font color=#337EA9>console.count()</font>
* 用法：設定計數器，計算內容出現次數。
### <font color=#337EA9>consoele.time()</font>
* 用法：設定計時器，計算所花時間。
* 用 `console.timeEnd` 來結束計時。
```javascript=
let i = 100;
console.time();
while(i > 0){
    i--;
    console.log(i);
}
console.timeEnd();//計算印出從100到0所需時間。
```
![](https://i.imgur.com/HgeXGx4.png)
### <font color= #337EA9>console.tabel()</font>
* 實用！！
* 可以將 `array` `object` 印出表格。
```javascript=
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
console.table(dogs);
```
![](https://i.imgur.com/1Pw6muM.png)


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