[JS作品]JS30系列09 – Dev Tools Domination 開發工具統計

 

作品網址：

Demo作品連結
JavaScript 30 作品目錄

 

 

主題目標

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

 

需求思考分析

  1. 依照題目要求 完成相關網頁處理。

 

處理步驟

步驟 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;");
string format sample

步驟 2.

各式不同的訊息類型

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

步驟 3.

Preserve log

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

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

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

步驟 4.

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

特別技術、函式

<HTML>

<CSS>

<JavaScript>

console

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

Element.classList

Element.classList 唯讀屬性代表了該元素所擁有之類別屬性（Class Attribute）的即時更新集－DOMTokenList。

Console.assert()

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

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() 在其所處位置上被調用的次數。

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對象的屬性，並通過類似文件樹樣式的交互列表顯示。

groupCollapsed() 與 groupEnd()

console .groupCollapsed

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

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

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() 時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間.

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

 

參考資料：

JS30紀錄 09-Dev Tools Domination： https://shunnien.github.io/2017/12/26/Javascript30days-9/

Js 30 day 中文指南：https://github.com/soyaine/JavaScript30

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言