Console控制台命令指南

开发人员的调试控制台以一种或另一种形式出现在web浏览器中已有多年。作为向开发人员报告错误的一种手段,它的能力在许多方面都得到了提高;例如自动记录信息,如网络请求、网络响应、安全错误或警告。

还有一种方法可以让网站的JavaScript触发输出到控制台的各种命令,以便进行调试。这些命令包含在几乎每个浏览器中都可用的控制台对象中。尽管这些特性在不同的浏览器之间基本上是一致的,但是有一些不同之处。其中一些差异在本质上只是视觉上的,而另一些则有轻微的功能差异需要记住。

console.xxx命令

console.log命令

我们可以做的第一件事是记录控制台对象本身,以查看您所选择的浏览器实际上提供了什么。

console.clear命令

随着控制台的大量使用,文本输出变得非常拥挤。有时你只是想要清理东西,并开始一个新的控制台。

debug(), error(), info(), log(), and warn()

这5个命令似乎可以完成完全相同的任务。而且,从技术上讲,他们确实做到了。但是浏览器提供了与这五个命令相关的附加功能,使每个命令都有自己独特的优点。

console.debug();
console.error();
console.info();
console.log();
console.warn();
字符串替换

不同的控制台日志命令提供了字符串替换,允许将不同的值插入到字符串中进行输出。这对于在日志中描述一个变量来清楚地说明报告的内容是很有用的。

console.log('This is a string: %s', 'string');
console.log('This is a number: %i', 42);
console.log('This is an object: %o', {object: 'object'});

输出样式

另一个可能有用和有趣的事情是,您可以将CSS样式应用到控制台的输出中。它的工作原理与字符串替换方法类似,即插入一个%c变量,以便从参数中应用样式。

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

参考资料

  1. https://css-tricks.com/a-guide-to-console-commands/
PHP HTTP客户端: Guzzle
开源优秀项目推荐202003期