iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

追求JS小姊姊30天系列 第 26

追求JS小姊姊系列 Day26 -- 不是被已讀,而是JS回覆你卻沒看到:`console`

前情提要

說明了不論是工具人或是姐妹,都有存活的範疇,以及背後的原理。

:累了,仔細回想起來,好像發現她沒回覆過我訊息。
工具人們:會不會只是你沒看到呢?
:什麼意思?


各種console基本操作:

console它是一個object,我們能透過它的方法在網頁、node介面進行互動,並取得程式碼執行的結果。

基本中的console.log()

console.log()內可以放任何型別的內容,並且將它印出。

//各型別內容:
let x = "";
let x1 = 1;
let x2 = true;
let x3 = function(){return 1};
let x4 = [1,2,3,4];
let x5 = {name:"andy"};

console.log(x,x1,x2,x3,x4,x5);

除此之外,還有..

印出資料屬性與方法console.dir()

console.dir()可以查看屬性,以Object為例

console.dir(Object);

計算程式碼運行時間 console.time(),console.timeEnd()

timetimeEnd需要輸入相同名稱,作為計時的範圍,會在timeEnd的部分,會回傳:1.計算名稱2.時間長度


console.time("a part");
function cool(i){
    console.log("執行中")
    return i;
}
cool(1);
console.timeEnd("a part");

清除訊息 console.clear()

當你不需要的訊息量過多時,可以用console.clear()清除

接收特定訊息console.error()

可用於:

  1. 拋出錯誤訊息
  2. 接收Error型別的值

拋出錯誤訊息

console.error("錯誤")

接收Error型別的值:

//正常內容
let x = 1;
let x1 = Error();
console.error(x,x1);

印出內容列表化 console.table

能將內容表格化,但只能用一個引數,印出內容須為array,object才會以表格化呈現。

let x = {name:"Andy",age:18,like:[1,2,3,4,5]};
let y = 5;
console.log(x,"我是log");
console.table(x,"我是table",y);

印出程式碼執行順序 console.trace()

依序印出你的執行順序

function first(){
    function second(){
        console.trace();
    }
    second();
}
first();

印出執行次數與內容 console.count()

可利用這個方法顯示執行的值與次數,如果沒有輸入,值的部分會顯示:default

// console.count() method
for(let i=0;i<5;i++){
    console.count(i+2);
}


客製化訊息

  1. 運用css上色%c
    可添加css屬性,透過%c決定屬性套用的位置,讓印出訊息有更多變化性:
console.log("上色訊息: %c 這裡", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

  1. 運用樣板字面值,讓你更彈性調整數值:
    添加的方式不止一種!搭配更彈性調整輸入值:
// Custom Console log example
  const spacing = '10px';
  const styles =
        `padding: ${spacing}; background-color: #68D7EA; color: #337ab7; font-style:
         italic; border: 1px solid black; font-size: 2em;`;
  console.log('%c鐵人賽倒數4天!', styles);

群組化group(),groupEnd()

筆者目前假想是:當你有很多回報內容要歸類為群組訊息,方便檢視時,就可以使用

使用前

console.log("使用前:");
console.log("群組頭");
console.log("內容1");
console.log("內容2");
console.log("群組結束")

使用group的寫法

console.log("使用後:");
console.group("群組頭");
console.log("內容1");
console.log("內容2");
console.groupEnd("群組結束");

比較一下,結果應該比較好閱讀吧?


工具人們:為了讓你早點放棄,偷偷告訴你吧,她其實還有一個交流頻繁的青梅竹馬。
:?!!??!!?

-- to be continued --


那今天就到這邊摟!
每天的休息,是為了後面的追求,明天見。


reference:

console in JavaScript
mdn
瀏覽器console.log()外的一些其他用法


上一篇
追求JS小姊姊系列 Day25 -- 工具人、姐妹的存活原理:宣告變數的有效區域
下一篇
追求JS小姊姊系列 Day27 -- 從哪裡BOM出來的青梅竹馬!
系列文
追求JS小姊姊30天30

尚未有邦友留言

立即登入留言