javascript 01 (console)

Console

我们经常会在浏览器中使用console.log来进行调试和参数的输出查看，但是console其实是一个非常丰富的封装，其中还有很多的方法，今天就来介绍一下。
首先，我们先看一下console的代码

console结构

下面就介绍一下，我们会用到的可以提高我们开发效率，调试效率的方法。

1. console.log()

//平时我们使用的时候会这样
console.log("测试内容不要当真");
//或者这样
console.log(1,2,3,4)
//或者这样
console.log({name:1})

上面我们使用的格式为console.log(object),console.log(object, otherObject, string)
除了这些基础用法还有比较好玩的用法
console.log(msg, values),这个格式的用法有点像C++的printf,C#的Console.Write()等
那么我们来看看怎么使用

//首先我们使用了3种占位符
console.log("我今天吃了%o,你吃了%d顿,你叫%s.", "Skittles", 22,"Kalan");

//%o的复杂传值
console.log("abc %o",{name:1})

效果
效果2

我们看一下效果
可以看到%o这个是对象占位符,%s这个是字符串占位符,%d这个是数字占位符

下面我们讲解一个更好玩的占位符%c，先上代码

console.log(
    "我爱你 %c路西" one day,
    "color: Red; background-color: orange; padding: 2px 5px; border-radius: 2px"
);

图片.png
看到这里，应该明白，这个占位符当你使用之后，后面所有的文字都将根据此CSS渲染%o除外

2. console.dir()

//直接上例子
console.dir(document.getElementsByClassName("full")[0])
console.log(document.getElementsByClassName("full")[0])

结果
图片.png

我们看到结果console.log直接输出的html，而console.dir输出的是DOM结构树对象

3. console.warn()

图片.png

这个函数直接会输出一个警告框，可以定位到输出位置

4. console.table()

这个函数能更好的显示列表型数据，我们用console.log显示对比一下

console.table([1,2,3],[2,3,4])
console.table({name:1,age:2},{name:11,age:22},{name:11,age:22})

对比图 图片.png

5. console.assert()

图片.png 图片.png

可以传递2个参数：如果为false会输出Assertion failed和第二个参数（如上图所示）

6.console.count

count只是作为一个计数器，或者作为一个命名计数器，可以统计代码被执行的次数。

for (let i = 0; i < 10000; i++) {
    if (i % 2) {
        console.count("odds");
    }
    if (!(i % 5)) {
        console.count("multiplesOfFive");
    }
    if (isPrime(i)) {
        console.count("prime");
    }
}

7.console.trace()

trace 可以调试模块之间的调用

export default class CupcakeService {

  constructor(dataLib) {
    this.dataLib = dataLib;
    if(typeof dataLib !== 'object') {
      console.log(dataLib);
      console.trace();
    }
  }
  ...
}

这里使用 console.log()仅告诉我们传递数据dataLib是什么 ，而没有具体的传递的路径。不过，console.trace()会非常清楚地告诉我们问题出在 Dashboard.js，我们可以看到是 new CupcakeService(false)导致错误。

8.console.time()

console.time() 是一个用于跟踪操作时间的专用函数，它是跟踪 JavaScript 执行时间的好方法。

function slowFunction(number) {
    var functionTimerStart = new Date().getTime();
    // something slow or complex with the numbers.
    // Factorials, or whatever.
    var functionTime = new Date().getTime() - functionTimerStart;
    console.log(`Function time: ${functionTime}`);
}
var start = new Date().getTime();

for (i = 0; i < 100000; ++i) {
    slowFunction(i);
}

var time = new Date().getTime() - start;
console.log(`Execution time: ${time}`);

这是一种老派的做法，我们使用 console.time()来简化以上代码。

const slowFunction = number => {
    console.time("slowFunction");
    // something slow or complex with the numbers.
    // Factorials, or whatever.
    console.timeEnd("slowFunction");
};
console.time();

for (i = 0; i < 100000; ++i) {
    slowFunction(i);
}
console.timeEnd();

9.console.group()

// this is the global scope
let number = 1;
console.group("OutsideLoop");
console.log(number);
console.group("Loop");
for (let i = 0; i < 5; i++) {
    number = i + number;
    console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log("All done now");

输出如下：

image

class MyClass {
    constructor(dataAccess) {
        console.group("Constructor");
        console.log("Constructor executed");
        console.assert(
            typeof dataAccess === "object",
            "Potentially incorrect dataAccess object"
        );
        this.initializeEvents();
        console.groupEnd();
    }
    initializeEvents() {
        console.group("events");
        console.log("Initialising events");
        console.groupEnd();
    }
}
let myClass = new MyClass(false);