CodingWife 寇丁人妻日安

【JS30】Day09:Dev Tools Domination

2018-02-23

javascript 30day

目標:了解開發者工具使用方法

一、對 DOM 元素按右鍵下中斷點

  1. subtree modifications: 當子元素發生變化時
  2. arrtibute modifications: 當元素發生變化時
  3. node removal: 當元素被移除時

二、console.log各種用法

  1. console.log(’’); 一邊的console.log
  2. console.log(’%s’);
  3. console.log(’%c’);
  4. console.wran(’’); 出現警告圖示
  5. console.error(’’); 出現錯誤圖示
  6. console.info(’’); 出現資訊圖示
  7. console.assert(Condition Expression,’’); 判斷是否為真,false則回傳錯誤。


  1. console.clear(); 清除所有訊息
  2. console.dir(); 顯示所有屬性
  3. console.groupCollapsed、console.groupEnd 群組化訊息
dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.name}`);
});
  1. console.count(); 累加計數
console.count(a);
console.count(a);
console.count(b);
a:1
a:2
b:1
  1. console.time()、 console.timeEnd() 計算區域範圍執行時間區間
  2. console.table()