09 - Dev Tools Domination

tags: JavaScript30

專案簡介

第九天要學習的是在網頁開發時 Console 的各種用法

課程影片：JS30 09
導讀影片：Alex

初始文件

Github 檔案位置：09 - Dev Tools Domination

網頁一開始的樣子如下，有個 List 和許多題目

正式製作

流程

今天要做的事情是熟悉以下 Console 功能

• Regular
• Interpolated
• Styled
• warning!
• Error :|
• Info
• Testing
• clearing
• Viewing DOM Elements
• Grouping together
• counting
• timing

Data

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
  const p = document.querySelector('p');
  p.style.color = '#BADA55';
  p.style.fontSize = '50px';
}

第一種用法

• Regular
• console.log

console.log('Hello world');

第二種用法

• Interpolated
• console.log，可應用格式化字符串

console.log('%s', 'Hello world');

第三種用法

• Styled
• console.log，以 %c 將文字加上 CSS 特效

console.log('%c OwOwOwOwO', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')  

第四種用法

• warning!
• console.warn，輸出警告訊息

console.warn('OwOwO');

第五種用法

• Error :|
• console.error，輸出錯誤訊息

console.error('AwAwA');

第六種用法

• Info
• console.error，與 console.log 相似

console.info('qqqqqqqqqqqqqqqq');

第七種用法

• Testing
• console.assert，若第一項參數為假則發出警告訊息

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

console.assert(p.classList.contains('ouch'), 'That is wrong!');

第八種用法

• clearing
• console.clear，清空 console 頁面

console.clear();

第九種用法

• Viewing DOM Elements
• console.dir，列出 DOM 元素的詳細資訊

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

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

第十種用法

• Grouping together
• console.groupCollapsed，創造一個折疊起來的區域，將在 console.groupEnd('區域名'); 前的 Console 輸出都輸出在新區域中

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}`);
});

第十一種用法

• counting
• console.count，紀錄輸出相同資料的次數

console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

第十二種用法

• timing
• console.time，開啟計時器
• console.timeEnd，關閉計時器
• console.table，將資料以表格輸出

console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
    .then(data => data.json())
    .then(data => {
        console.timeEnd('fetching data');
        console.log(data);
    });


console.table(dogs);

最後程式碼

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
  const p = document.querySelector('p');
  p.style.color = '#BADA55';
  p.style.fontSize = '50px';
}

// Regular
console.log('hello');

// Interpolated
console.log('%s', 'Hello world');

// Styled
console.log('%c OwOwOwOwO', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')  

// warning!
console.warn('OwOwO');  

// Error :|
console.error('AwAwA');

// Info
console.info('qqqqqqqqqqqqqqqq');

// Testing
const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
// console.clear();

// Viewing DOM Elements
console.log(p);
console.dir(p);

// console.clear();

// Grouping together
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}`);
});

// counting

console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

// timing
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

console.table(dogs);

結語

以上是第九天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

14 Must Know Chrome Dev Tools Tricks - #JavaScript30 9/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 9：Dev Tools Domination
MDN Web Docs