今日任務:認識console相關方法

如果想要看該元素到底是觸發了什麼 JavaScript 事件，可以在該元素上面設定斷點。這裡因為點選該文字後會導致該元素的 CSS 屬性改變，因此我們選擇監聽 attribute modifications：

之後觸發JS就會跳到該行

普通

console.log('hello')

加上%s，後面放參數

console.log('hello, %s 你好','阿明')

加上%c，後面放css樣式

console.log('%c hello,你好','font-size:20px;background:red')

warn、error和info

console.warn('警告')
console.error('錯誤')
console.info('資訊資訊資訊資訊')

assert(結果為true就不會跳訊息)

console.assert(1==2,'結果為true就不會跳')
const p = document.querySelector('p');
console.assert(p.classList.contains('puch'),'p的class沒有puch')

clear

console.clear()

dir

console.log(p)
console.dir(p)

group(當有長串的)

console.group()後、console.groupEnd()前包在一起

dogs.forEach(dog=>{
  console.log(`名字:${dog.name}`)
  console.log(`年齡:${dog.age}`)
  console.log(`${dog.name}已經相當於人類的${dog.age}歲`)
})

dogs.forEach(dog=>{
  console.group(`${dog.name}`)
  console.log(`名字:${dog.name}`)
  console.log(`年齡:${dog.age}`)
  console.log(`${dog.name}已經相當於人類的${dog.age}歲`)
  console.groupEnd(`${dog.name}`)
})

groupCollapsed預設就會先收起來

dogs.forEach(dog=>{
  console.groupCollapsed(`${dog.name}`)
  console.log(`名字:${dog.name}`)
  console.log(`年齡:${dog.age}`)
  console.log(`${dog.name}已經相當於人類的${dog.age}歲`)
  console.groupEnd(`${dog.name}`)
})

count調用count()的次數

time經過的時間

console.time('forEach')
dogs.forEach(dog=>{
  console.groupCollapsed(`${dog.name}`)
  console.log(`名字:${dog.name}`)
  console.log(`年齡:${dog.age}`)
  console.log(`${dog.name}已經相當於人類的${dog.age}歲`)
  console.groupEnd(`${dog.name}`)
})
console.timeEnd('forEach')

table 用表格顯示

console.table(dogs)

今日學習到的:

• console.log
  • 加上%s，後面放參數
  • 加上%c，後面放css樣式
• console.warn、error和info
• console.assert()
• console.clear()
• console.dir()
• console.group()、console.groupEnd()、groupCollapsed()
• count()
• console.time()、console.timeEnd()
• console.table

效果連結:連結

參考連結:
pjchender: Debugger