【JS30】Day09:Dev Tools Domination

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 則回傳錯誤。

```

8. console.clear(); 清除所有訊息
9. console.dir(); 顯示所有屬性
10. console.groupCollapsed、console.groupEnd 群組化訊息

```js
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()
【JS30】Day10:Hold Shift and Check Checkboxes 【Hexo】使用 Travis CI 自動佈署 Blog

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×