admin管理员组

文章数量:1531709

提示:本文重制版,重制版,

文章目录

  • 前言
  • 一、控制台.log命令
  • 二、第一步.clear命令
    • 1.clear
    • 2.更多~
    • 设置输出样式
    • assert()
    • count()
    • dir() and dirxml()
    • group(),groupCollapsed()和groupEnd()
    • table()
    • 一些其他控制台实用程序
        • $0, $1, $2, $3, $4
    • 另外
  • 总结


前言

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


开发人员的调试控制台多年来一直在 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

本文标签: 控制台命令浏览器指南