Console
我们经常会在浏览器中使用console.log来进行调试和参数的输出查看，但是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})
我们看一下效果
可以看到%o这个是对象占位符,%s这个是字符串占位符,%d这个是数字占位符
下面我们讲解一个更好玩的占位符%c，先上代码
console.log(
"我爱你 %c路西" one day,
"color: Red; background-color: orange; padding: 2px 5px; border-radius: 2px"
);
看到这里，应该明白，这个占位符当你使用之后，后面所有的文字都将根据此CSS渲染
%o除外
2. console.dir()
//直接上例子
console.dir(document.getElementsByClassName("full")[0])
console.log(document.getElementsByClassName("full")[0])
我们看到结果console.log直接输出的html，而console.dir输出的是DOM结构树对象
3. console.warn()
这个函数直接会输出一个警告框，可以定位到输出位置
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})
5. console.assert()
可以传递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");
输出如下：
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);
