iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

頁面連結(請打開 console 查看)

今天同樣不會做出東西,而是學習 console 的各種小技巧!大家可以將下面示範的程式碼貼在瀏覽器玩看看

console.log(..)

最基本的使用方式,常用來查看 JS 是否串接成功,或是當不確定狀況時查看變數或目前狀態

console.log('Hello world!');

// Hello world!

console.log(%s .. , ..)

這種方式可以插入值到字串當中,例如:

console.log('I am an %s string', '?');

// I am an ? string

可以看到 %s 被貓頭鷹 emoji 給取代了,這種用法有點類似在 C 之類的語言的表達方式(%s 代表 string),如果要帶入數字,則使用 %i 或者 %f(integer & float)

console.log(%c .. , ..)

這種謝法使我們能夠將 console.log 的內容當成 CSS 更改樣式,但 %c 只能放在開頭

console.log('%c I am some hugeee text!', 'font-size: 20px; color: tomato');

可以看到文字變大也變顏色了!

console.warn(..)

印出黃底的警告文字

console.warn('Oh snap!');

console.error(..)

如一般出錯時看到的錯誤提示,此語法會印出紅底的錯誤訊息

console.error('Something went wrong!');

console.info(..)

此語法會印出如 console.log 的顯示方式,但在開頭前面會有一個 i 的符號(我在 chrome 沒看到符號,但 firefox 及 safari 都有)

console.info('在非洲,每六十秒,就有一分鐘過去');

console.assert(.. , ..)

此語法可以用於測試使用,共有兩個參數:第一個參數帶入欲測試的項目,如果結果是 false 才會印出第二個參數的字串

// HTML
<p>hello</p>

const p = document.querySelector('p');
console.assert(p.classList.contains('test'), 'That is not true!');  // 逗點後的訊息只有在前一項為 false 時才會顯示

console.clear()

此語法會將 console 中的內容全部清除,請謹慎使用!

console.clear();

console.dir(element)

// HTML
<p>hello</p>

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

// <p>hello</p>

可以看到平常印出 DOM 元素時至只會印出該元素本身,並無法看到可用的方法(methods)或屬性(properties),但使用 console.dir() 就可以囉!

console.dir(p);

// 會印出一個 HTMLElement 內含方法及屬性

console.group(..) / console.groupCollapsed(..) & console.groupEnd(..)

當需要使用迴圈印出一些重複的內容時,console 的版面會顯得雜亂,此時可以使用 console.group(..) 來群組同一組的內容,記得結尾時要使用 console.groupEnd(..) 來標示結束

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

dogs.forEach(dog => {
    console.groupCollapsed(`${dog.name}`);  // console.group(..) 則預設會展開內容
    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}`);
});

console.count(..)

此語法紀錄總共呼叫 console.count(..) 的次數;會依照不同的內容分別計算

console.count('Henry');
console.count('Henry');
console.count('Kai');
console.count('Kai');
console.count('Henry');
console.count('Kai');
console.count('Kai');
console.count('Henry');
console.count('Kai');

// Henry: 1
// Henry: 2
// Kai: 1
// Kai: 2
// Henry: 3
// Kai: 3
// Kai: 4
// Henry: 4
// Kai: 5

console.time(..) & console.timeEnd(..)

此語法紀錄了某個動作的花費總時間,開頭使用 console.time(..),結尾使用 console.timeEnd(..)

console.time('hello');
alert('Hello world!');
console.timeEnd('hello')

// hello: 1620.22412109375ms

console.table(..)

console.table() 內容如果放入一個 array,console 會自動以表格方式呈現

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

console.table(dogs);

// 以表格方式呈現

以上就是今天的介紹,沒辦法呈現完整結果的部分,請大家點擊最上方連結或是實際在 console 操作~

Reference


上一篇
JS30 Day 8 - Fun with HTML5 Canvas
下一篇
JS30 Day 10 - Hold Shift and Check Checkboxes
系列文
一起挑戰 JavaScript 30 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言