Day9: Must Know Dev Tools Tricks
==
###### tags: `JS30`

## <font color=#3733FF>console</font>

### <font color=#3733FF>what cause JavaScript run</font>

function makeGreen() {
  const p = document.querySelector('p');
  p.style.color = '#BADA55';
  p.style.fontSize = '50px';
}

從HTML找到DOM節點，選attribute modifications
p tag會出現一個圓點，點擊文字會觸發onClick事件，執行makeGreen()，可以觀察到執行的時候發生什麼事

### <font color=#3733FF>Interpolated : %s</font>

console.log('Hello I am a %s string!', '🥹')

### <font color=#3733FF>Styled : %c</font>

console.log('%c I am some great text','color: orange; font-size:50px;background:pink')


### <font color=#3733FF>Warning!</font>

console.warn('OH NO')

### <font color=#3733FF>Error :|</font>

console.error('error message')

### <font color=#3733FF>Info</font>

console.info('crocodiles eat 3-4 people per year')

### <font color=#3733FF>Testing</font>
如果輸入 1 === 1 ，不會顯示任何字，錯誤的才會

console.assert( 1 === 2, 'That is wrong')


### <font color=#3733FF>clearing</font>

console.clear()

### <font color=#3733FF>Viewing DOM Elements</font>
console.dir 會回傳可查看的內容

const p = document.querySelector('p')
console.log(p)
console.dir(p)


### <font color=#3733FF>Grouping together</font>
Group

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

dogs.forEach( dog => {
  console.group(`${dog.name}`)
  console.log(`this is ${dog.name}`)
  console.log(`this is ${dog.age * 7} dog years old`)
  console.groupEnd(`${dog.name}`)
})

GroupCollapsed

dogs.forEach( dog => {
  console.groupCollapsed(`${dog.name}`)
  console.log(`this is ${dog.name}`)
  console.log(`this is ${dog.age * 7} dog years old`)
  console.groupEnd(`${dog.name}`)
})


### <font color=#3733FF>counting</font>

console.count('apple')
console.count('banana')
console.count('apple')
console.count('orange')
console.count('apple')
console.count('orange')
console.count('banana')
console.count('orange')

### <font color=#3733FF>timing</font>

console.time('fetch data')
fetch('http://api.github.com/users/wesbos')
  .then( data => data.json())
  .then(data => {
    console.timeEnd('fetch data')
    console.log(data)
  })