iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
1
Modern Web

新手也能懂的JS30系列 第 9

JS30-Day9-Dev Tools Domination

Day8-課題內容

今天的內容中要來深入學習console物件的相關方法。雖然我們一般都透過console.log,在開發者工具的console中印出我們想知道的資料,但其實還有許多不同的功能。[1]

Console物件

console物件提供了一個接口,可以連接到瀏覽器中的debugging console,並透過不同的方法輸出對應的訊息。[2][3]

Console methods

  1. 一般用法:console.log()
console.log('Hello World!!')

  1. 使用參數:透過加上%s,可以透過參數的方式印出字串。
 console.log("Hello I'm a %s", "insert text");

  1. 修改字型樣式:透過在前面加上%c,可以將印出來的字串,修改成我們想要的樣式。
console.log("%c Let's do this!", "color:red; font-size:20px;");

  1. warning:輸出一條類似console.log()的消息,但同時在記錄的消息旁顯示一個黃色警告圖標。
console.warn('Warning!');

  1. error:輸出一條類似於console.log()的消息,將消息設置成錯誤樣式。
console.error('You should not pass!!');

  1. info:輸出一條類似console.log()的消息,但同時在輸出旁顯示一個資訊圖標。
console.info("What's wrong?");

筆者在這邊試了很多次都沒有圖標出現,如果有知道為什麼的人拜託請告訴我,我會感謝您的大恩大德!

  1. assert:在被評估的表達式爲false時,向控制檯寫入一個錯誤。
console.assert(1===2, 'Oh No~');

  1. clear:清除控制檯。
console.clear();
  1. dir:輸出以JavaScript形式表示的指定對象。如果正在記錄的對象是HTML元素,將輸出其以DOM形式表示的屬性。
const p =document.querySelector('p');
console.log(p);
console.dir(p);

  1. group:啓動一個帶有可選標題的新日誌組。以可視化方式將在console.group()後、console.groupEnd()前發生的所有控制檯輸出組合在一起。
const dogs = [
      { name: 'Snickers', age: 2 }, 
      { name: 'hugo', age: 8 },
      { name: 'Poppy', age: 1}
];

dogs.forEach(function(dog){
    console.group(dog['name']);
    console.log(`${dog['name']} is ${dog['age']} years old!`);
    console.groupEnd(dog['name']);
});

  1. count:寫入在同一行使用相同標籤調用count()的次數。
const text = ['a', 'b', 'a', 'b', 'c', 'a', 'b'];
text.forEach(function(letter){
    console.count(letter);
});

  1. time:啓動一個具有關聯標籤的新計時器。使用相同標籤調用console.timeEnd()時,定時器將停止,經過的時間將顯示在控制檯中。
console.time("Array initialize");
var array = ['a', 'b', 'c', 'd', 'e', 'f'];
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
console.timeEnd("Array initialize");

總結

今天學到console物件的其他各種方法,讓我們可以在開發者工具中可以印出不同的資料,大家可以多利用適合的方法,來加速函式的撰寫哦!

參考資料

  1. javascript30
  2. MDN-console
  3. Tools for Web Developers-Console API 參考

上一篇
JS30-Day8-Fun with HTML5 Canvas
下一篇
JS30-Day10-Hold Shift to Check Multiple Checkboxes
系列文
新手也能懂的JS3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言