JS30 Day 9 筆記

功能

介紹各種 console. 的使用
Demo

// 把 console 包成一個物件
// 這樣在開發後只要 isDev : false，就可以不執行 console， 不用一個個註解掉或刪除
let console = {
    isDev : true,
    log(...args){
        if(!this.isDev) return
        window.console.log(...args)
    },
    warn(...args){
        if(!this.isDev) return
        window.console.warn(...args)
    },
    error(...args){
        if(!this.isDev) return
        window.console.error(...args)
    },
    info(...args){
        if(!this.isDev) return
        window.console.info(...args)
    },
    assert(...args){
        if(!this.isDev) return
        window.console.assert(...args)
    },
    dir(...args){
        if(!this.isDev) return
        window.console.dir(...args)
    },
    clear(...args){
          if(!this.isDev) return
          window.console.clear()
    },
    group(...args){
          if(!this.isDev) return
          window.console.group(...args)
    },
    groupEnd(...args){
          if(!this.isDev) return
          window.console.groupEnd(...args)
    },
    count(...args){
          if(!this.isDev) return
          window.console.count(...args)
    },
    time(...args){
        if(!this.isDev) return
        window.console.time(...args)
    },
    timeEnd(...args){
        if(!this.isDev) return
        window.console.timeEnd(...args)
    },
    table(...args){
      if(!this.isDev) return
      window.console.table(...args)
  }
}

1. console.log()

console.log('Hello World')

1. console.log('%s',value)

// Interpolated
// %s : 字串 / %f : 浮點數 / %d : 數字
// 第二個參數為要被帶入的值
console.log('Hello,%s', 'World') // Hello,World
console.log('Hello,%f', 3.14) // 3.14
console.log('Hello,%d', 3.14) // 3

// 用 ES6 template literals 的寫法更方便閱讀
let str = 'World'
console.log(`Hello, ${str}`) // Hello,World

1. console.log( %c , font-style)

// styled
// 將字串帶入 CSS 樣式
console.log('%c 住手！', 'font-size: 50px; color: red')

1. console.warn()

// warning
// 顯示警告的樣式
console.warn('Warning')

1. console.error()

// Error
// 顯示為錯誤圖示
console.error('Error')

1. console.info()

// info
// 顯示為資訊圖示
console.info('info')

1. console.assert()

// testing
// 用來測試如果第一個參數，若結果為 false， 則顯示第二個參數
console.assert( 1 === 2 , "no~")

// 以下的結果都會回傳第二個參數
console.assert(false,"訊息")
console.assert("","訊息")
console.assert(0,"訊息")
console.assert(NaN,"訊息")
console.assert(null,"訊息")
console.assert(undefined,"訊息")

1. console.clear()
   清除console的所有訊息

   快捷鍵

   • Mac =>⌘(Command)+K
   • Windows => Ctrl+L

1. console.dir()

// Viewing DOM Elements

const p = document.querySelector('p')
console.log(p) // 返回 p 本身的內容

console.dir(p) // 印出 p 以及擁有的屬性

1. console.group() & console.groupEnd()

// Grouping together
// 用 group 將資訊包成層級式
dogs.forEach(function(dog){
  console.group(dog['name'])
  console.log(`${dog['name']} is ${dog['age']} years old`)
  console.groupEnd(dog['name'])
})


// 若要資料一開始先收合，可以把 console.group 換成 console.groupCollapsed

1. console.count()

// counting
// 計算此 console 出現的次數
console.count('a') // a: 1
console.count('b') // b: 1
console.count('a') // a: 2
console.count('a') // a: 3
console.count('a') // a: 4
console.count('a') // a: 5
console.count('b') // b: 2
console.count('b') // b: 3


// 用 iterate 的方法求出 count
// const text = ['a', 'b', 'a', 'b', 'c', 'a', 'b']
// text.forEach(function(letter){
//   console.count(letter)
// })


// 若要歸零 ： console.countReset

1. console.time() & console.timeEnd()

// timing
// 計算某一段區域內的程式執行的時間，
console.time('fetch data')
fetch('https://api.github.com/users/webos')
      .then(data => data.json())
      .then(data =>{
        console.timeEnd('fetch data')
        console.log(data)
      })

1. console.table()

// table
console.table(dogs)

// 篩選只想顯示的欄位
console.table(dogs,['name'])

其他資源 （chrome dev tool）

• 六角學院 Chrome 網頁除錯功能大解密，
• Google Dev Tool API

參考資料：

• 14 Must Know Chrome Dev Tools Tricks - #JavaScript30 9/30 @Wes Bos
• [Alex 宅幹嘛] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 9：Dev Tools Domination @Alex 宅幹嘛
• 09 - Dev Tools Domination @guahsu
• 09 Console 调试技巧指南@soyaine