浏览器控制台命令指南-重制版

提示：本文重制版，重制版，

---

前言

没错，我活过来了，(你还有脸过来)，嘿嘿，看到这个我就想换掉，所以就出来了重制版，
だから始めましょう！！！！！

---

开发人员的调试控制台多年来一直在 Web 浏览器中以一种或另一种形式提供。最初是作为向开发人员报告错误的一种手段，其功能在许多方面都有所提高;例如自动记录网络请求、网络响应、安全错误或警告等信息。

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

---

来死购

一、控制台.log命令

我们可以做的第一件事是记录控制台对象本身，以查看您选择的浏览器实际提供的内容。

console.log(console);

此命令将输出控制台对象的各种属性，因为浏览器知道它们。它们中的大多数都是函数，无论浏览器如何，它们都将相当一致。如果控制台对象的属性从一个浏览器到另一个浏览器存在差异，这样您就可以看到差异。我可以指出Firefox和Chrome之间的一个区别是Chrome提供了一个“内存”属性，可以输出一些基本的内存使用情况统计信息。Firefox 不提供此属性，但具有 Chrome 没有的“名称”属性。

值得庆幸的是，浏览器之间的大多数差异往往同样微不足道。这样，您可以相当确信，无论使用哪种浏览器，您的代码都将输出大致相同的内容。

二、第一步.clear命令

1.clear

打开控制台，会出现一堆神秘的报错，所以要干的事清除
一下指令

console.clear()

看，多干净
做笔记干嘛，愣着啊！！！！！

2.更多~

指令如下（示例）：

console.debug();
console.error();
console.info();
console.log();
console.warn();

竟然不起作用？？？？无伤大雅，我们换浏览器

他欺负我，为什么？

这五个命令有用的一点是，浏览器提供了过滤选项，可以根据需要显示或隐藏每种类型。Firefox将它们放在控制台顶部输出上方的位置，而Chrome将它们隐藏在下拉菜单中，标记为“所有级别”，您可以在早期的Chrome控制台屏幕截图中看到。“所有级别”都在那里，因为我有所有五个设置要显示。如果选择“默认”选项，则调试输出（列为“详细”）将被隐藏，而其他输出将显示。取消选中“信息”、“警告”或“错误”会导致下拉列表显示不同的标题，例如“自定义级别”或“仅错误”，具体取决于所选内容。
使用错误和警告的意图很容易确定;如何使用其他选择取决于您。如果您确实广泛使用了不同的选项，那么您可以考虑记录每个选项的期望，以免在项目后期混淆事情 - 特别是如果它是一个团队项目。
现在，让我们讨论一下我们可以在这些命令中实际记录的内容。由于它们的行为都相同，因此我将仅以日志记录为例。
最简单的示例涉及将字符串、数字、对象或数组传递到 log 命令中。从技术上讲，可以使用任何JavaScript的数据类型，但对于大多数数据类型，输出大致相同。

console.log('string');
console.log(42);
console.log({
   object: 'object'});
console.log(['array', 'array']);

它们通常处于折叠状态，但箭头旁边的输出在两种状态之间是一致的。

设置输出样式

另一个可能有用且有趣的事情是，您可以将CSS样式应用于控制台的输出。它的工作原理就像字符串替换方法一样，您可以在其中插入要从参数应用的样式的变量。%c

下面是一个简单的示例：

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

甚至还可以这么玩

console.log