追求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()

time跟timeEnd需要输入相同名称，作为计时的范围，会在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");

2. 运用样板字面值，让你更弹性调整数值：
   添加的方式不止一种！搭配更弹性调整输入值：

// 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()外的一些其他用法