乐趣区

关于javascript:别只用-consolelog-调试-js-代码了

JavaScript 中的 console 对象可用于拜访浏览器调试控制台,能够用它在控制台中输入代码中变量的值。

不过大多数人都只过 console.log() 在浏览器控制台中进行输入调试。log 只是 console 对象的一种办法,除了它还有很多十分有用的办法。

1. console.log()

这个办法次要用于将传给它的值输入到控制台。能够给 log() 传递任何类型:能够是字符串,数组,对象,布尔值等。

console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});

输入:

2. console.error()

这个办法在测试代码时十分有用。它用于将谬误输入到浏览器控制台。谬误音讯默认用红色突出显示。

console.error('Error found');

输入:

3. console.warn()

这个办法用于向控制台抛出正告。正告音讯默认以黄色突出显示。

console.warn('Warning!');

输入:

4. console.clear()

这个函数用来革除控制台。如果控制台中充斥了音讯和错误信息,能够用它革除控制台,并在控制台中显示一条音讯:Console was cleared

console.clear()

输入:

5. console.time() 与 console.timeEnd()

这两种办法要互相联合应用。每当咱们想晓得一个代码块或函数所破费的工夫时,都能够用 time()timeEnd() 办法。这两个函数都以字符串作为参数。应用时要对这两个函数用雷同的字符串来测量工夫。

console.time('timer'); const hello =  function(){console.log('Hello Console!');
}const bye = function(){console.log('Bye Console!');
}hello(); // calling hello();
bye(); // calling bye();console.timeEnd('timer');

输入:

6. console.table()

这个办法能够在控制台中生成一个表格,可能进步可读性。它能够主动为数组或对象生成一个表。

console.table({a: 1, b: 2, c: 3}); 

输入:

7. console.count()

能够在循环中用它来查看特定的值应用了多少次。

for(let i=0; i<3; i++){console.count(i);
}

输入:

8. console.group() 和 console.groupEnd()

group()groupEnd() 能够让咱们把内容分组到一个独自的块中。就像 time()timeEnd() 一样,它们须要以雷同值的标签作为参数。你还能够对组执行开展或折叠操作。

console.group('group1'); 
  console.warn('warning'); 
  console.error('error'); 
  console.log('I belong to a group'); 
console.groupEnd('group1'); 
console.log('I dont belong to any group');

输入:

9. 为你的日志增加款式

还能够在控制台日志增加款式,使日志看起来更丑陋。只须要把 CSS 款式作为 log() 函数的第二个参数,同时第一个参数以 %c 开始即可。

const spacing = '10px'; 
const styles =  `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`; 
console.log('%cI am a styled log', styles);

输入:

总结

console 对象对代码调试十分有用。然而很多人通常只用 log 函数。从当初开始应该充分利用 console 对象,以便更轻松地调试并活泼地查看浏览器日志。


本文首发微信公众号:前端先锋

欢送扫描二维码关注公众号,每天都给你推送陈腐的前端技术文章


欢送持续浏览本专栏其它高赞文章:

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的?从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战:在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么?
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K,该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现

  • 更多文章 …
退出移动版