目標

開發工具 Console 的運用說明。介紹 log 、 warn 、 error 、 info 、 assert 、 clear 、 dir 、groupCollapsed 、 groupEnd 、 count 、 time 、 timeEnd 等指令運用。

Demo | Github

處理步驟

步驟 1.

console.log 基本運用，利用 log(string) 裡面輸出字串。
進階運用是透過字符的替換

％s：字串
％f：浮點數
％o：物件
％d：整數
％c：設定輸出的樣式，在之後的文字將按照第二個參數里的設置進行顯示

console.log("I am a string: %s ", "log"); //log
console.log("I am a float number: %f ", 1.23); //1.23
console.log("I am a object: %o ", {name:"allen"}); // {name:"allen"}
console.log("I am a int number: %d ", 1); //1
console.log("%c other style", "color: #00fdff; font-size: 2em;");

步驟 2.

各式不同的訊息類型

warning 訊息前出現此符號
Error 訊息前出現此符號
Info 單純只有訊息

步驟 3.

測試使用的 assert 與清除 console 的方法 clear。
使用 chrome 的時候，看一下有沒有設定 Preserve log ，這個選項勾選的話， clear 會無法清除 console 喔

查看 DOM 元素，分別使用基本方式 log() 與 dir()

log() 假如是物件的話，會直接輸出物件內容；假如是 DOM 則會輸出 HTML 標籤
dir() 以樹狀結構呈現結果

步驟 4.

進行分組、統計計算與時間計算等。分別運用 groupCollapsed 、 count 與 time

筆記與備註事項

此篇主題都是 Console 的運用，可以參考 MDN 上的說明來學習。

JavaScript 部分

Console.assert()

測試使用，當判斷的條件式成立，不會有任何反應，當條件式不成立，則會提供錯訊息，然後訊息顯示自訂的訊息部分

1 2	console.assert(1===1, 'this is wrong'); console.assert(1===2, 'this is wrong'); // Assertion failed: this is wrong

Console.count()

輸出 count() 被調用的次數。此函數接受一個可選參數 label
如果有 label ，此函數輸出為那個指定的 label 和 count()被調用的次數。
如果 label 被忽略，此函數輸出 count() 在其所處位置上被調用的次數。

資料來源 - MDN

var user = "";

function greetEmpty() {
  console.count();
}
function greet() {
  console.count(user);
  return "hi " + user;
}
greetEmpty();       // 1
greetEmpty();       // 2
greetEmpty();       // 3
console.count();    // 1

user = "bob";
greet();                // "bob: 1"
user = "alice";
greet();                // "alice: 1"
greet();                // "alice: 2"
console.count("alice"); // "alice: 3"

Console.dir()

在控制台中顯示指定JavaScript對象的屬性，並通過類似文件樹樣式的交互列表顯示。
資料來源 - MDN

groupCollapsed() 與 groupEnd()

console .group Collapsed

在Web控制台上創建一個新的分組.隨後輸出到控制台上的內容都會被添加一個縮進,表示該內容屬於當前分組,直到調用 console.groupEnd() 之後,當前分組結束。和 console.group() 方法的不同點是,新建的分組默認是折疊的。用戶必須點擊一個按鈕才能將折疊的內容打開.
資料來源 - MDN

說明上這兩個方法都是無參數，但是範例中，是可以輸入參數的，輸入的參數則是顯示的分組標題文字。

const dogs = [{ name: "Snickers", age: 2 }, { name: "hugo", age: 8 }];
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();
});

time() 與 timeEnd()

console.time

你可以啟動一個計時器（timer）來跟踪某一個操作的佔用時長。每一個計時器必須擁有唯一的名字，頁面中最多能同時運行 10,000 個計時器。當以此計時器名字為參數調用 console.timeEnd() 時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間.
資料來源 - MDN

計算出來的時間以毫秒顯示

ShunNien's Blog

JS30紀錄 09-Dev Tools Domination

目標