iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

JavaScript 30天系列 第 9

JS30 - day09: 14 Must Know Dev Tools Tricks

介紹Chrome中 14種console的用法
很適合用在除錯,觀察程式碼跑的流程,以及呈現資料
更多資訊:https://goo.gl/ysnJXM

範例語法備註

[ 中斷點Breakpoints ]

  • 有三種觸發模式(可複選):

    1. subtree modifications 當添加、改變、刪除子元素時觸發
    2. attributes modifications 當元素屬性發生改變時觸發
    3. node removal 當移除元素時觸發
  • 範例中欲觀察P元素,在P元素按滑鼠右鍵 > Breck on > attributes modifications
    https://ithelp.ithome.com.tw/upload/images/20181017/20111164SVjgeoxMVW.png

  • 選擇完畢後可以發現P元素前面多了一個藍色點點,這時候點選P元素觸發function makeGreen

    • 這時候可以就可以看到程式碼再跑的順序
    • 可以點選圖片中圈圈裡面示意的按鈕(然後我寫反了哈哈哈哈哈)
      https://ithelp.ithome.com.tw/upload/images/20181017/20111164uCK40dXbaf.png

[ console的一堆超實用用法 ]

** 1. console.log() **
這大家超常用吧 哈哈哈哈

console.log('hello');
// 輸出: hello

** 2. console.log('%s', value) **
可將%s顯示為後方參數的值

console.log('hello %s', 'Yellow');
// 輸出: hello Yellow

** 3. console.log('%c', font-style) **
可將%c顯示為後方參數待的CSS樣式

console.log('%c i am a text', 'font-size:30px; color:red;');
// 輸出字級為30px的紅

** 4. console.warn() **
顯示驚嘆號icon 做警告提示

console.warn('OH NOOO');

https://ithelp.ithome.com.tw/upload/images/20181017/20111164JFagsBk0cD.png

** 5. console.error() **
顯示叉叉icon 做錯誤提示

console.error('Shit!');

https://ithelp.ithome.com.tw/upload/images/20181017/201111647Cn78V9D4s.png

** 6. console.info() **
顯示驚嘆號icon 做資訊提示 (但我的chrome沒出現@@)

console.info('Some message here!');

** 7. console.assert() **
判斷true & false,如果是false就顯示後方參數錯誤訊息

console.assert(1===2, 'nooooooo!'); 
// 輸出: Assertion failed: nooooooo!

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

** 9. console.dir() **
可以顯示選取物件的所有屬性

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

** 10. console.group() && console.groupCollapsed() **
可以把輸出的資訊群組起來,其中groupCollapsed預設群組是關閉的
建議使用console.table(dogs); 畫好一個table給你看

// dogs陣列
const dogs = [
  { name: 'dog1', age: 2, like: 'ball' },
  { name: 'dog2', age: 8, like: 'eat' }
];

dogs.forEach(dog=>{
  console.group(`${dog.name}`);
  console.log(`AGE: ${dog.age}`);
  console.log(`LIKE: ${dog.like}`);
  console.groupEnd(`${dog.name}`);
});

輸出:
https://ithelp.ithome.com.tw/upload/images/20181017/20111164Zo3AoyEIlj.png

** 11. console.count() **
顯示累加數量

console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
// 輸出:
// Wes: 1
// Wes: 2
// Steve: 1
// Steve: 2
// Wes: 3
// Steve: 3
// Steve: 4
// Steve: 5

** 12.console.time() & console.timeEnd() **
可以用來計算區域內執行的時間,計算API取回資料時間好用!
有頭有尾,裡面的字串要一樣!

console.time('GET API 的時間:');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('GET API 的時間:');
    console.log(data);
  });
// 輸出: GET API 的時間:: 705.93017578125ms

上一篇
JS30 - day08: Fun with HTML5 Canvas
下一篇
JS30 - day10: Hold Shift to Check Multiple Checkboxes
系列文
JavaScript 30天11

尚未有邦友留言

立即登入留言