常用Console调试命令介绍:log、table、time等及占位符作用

托福2025-09-02 20:21:54佚名

结束内联分组

console.group('Group One');
console.group('Group Two');
// some code
分组 Two 完成关闭,记录停止
结束分组操作,标记 Group One 的终止

info()

.log 别名,输出信息

console.info("runoob")

log()

输出信息

console.log("runoob")

table()

将复合类型的数据转为表格显示。

var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];

console什么意思_console调试命令_console.log占位符

console.table(arr); var obj= { a:{ num: "1"}, b:{ num: "2"}, c:{ num: "3" } }; console.table(obj);

time()

计时开始

console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}

console什么意思_console.log占位符_console调试命令

console.timeEnd('计时器2');

()

计时结束

console.time('计时器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器2');

trace()

追踪函数的调用过程

function d(a) { 
  console.trace();
  return a;
}
function b(a) { 
  return c(a);
}
function c(a) { 
  return d(a);
}
var a = b('123');

warn()

输出警告信息

console什么意思_console调试命令_console.log占位符

console.warn("警告")

常用 调试命令

最常用的就是 .log 了。

这些占位符格式能够处理多种数据类型,包括字符、数值、浮点数以及对象,具体支持的类型有字符型(%s)、整型(%d或%i)、浮点型(%f)和对象型(%o)。

占位符作用

%s

字符串

%d or %i

整数

%f

浮点数

%o

可展开的DOM

%O

列出DOM的属性

%c

根据提供的css样式格式化字符串

效果:

console什么意思_console.log占位符_console调试命令

%o和%O都是用来显示对象的console什么意思,对于常规对象,这两个没有差别,然而在打印DOM节点时console什么意思,它们的表现就不同了:

效果:

%c 标记是最频繁应用的。应用 %c 标记时,其后参数必须是 CSS 规则,用于对显示文本进行样式设计。常见的呈现形式包含文字表现、图像生成。

文字输出

效果:

除了常规文字表述,还可以呈现类似界面布局的图形符号,这种图形符号能够通过互联网即时制作完成。

一种可行方案是借助网络资源创建图形字符,接着把内容粘贴过来,需要消除原有行首回车,换成n符号,最终形成单一连续代码行,这样就能直接放入.log()函数调用,当然还可以搭配%c参数实现更炫目的显示,因为标准输出本身就不换行

图片输出

因为无法设置图片,所以采用图片作为背景来使用。而且,宽度与高度设置不可用,可以通过空格和字体大小来实现;也可以借助边框和行高来进行替代。

三、信息分组

四、查看对象的信息

五、显示某个节点的内容

console什么意思_console调试命令_console.log占位符

括号的作用是展示网页特定位置所含的HTML或XML内容。

六、判断变量是否是真

它用于判定一个公式或符号能否成立。倘若结论并非肯定,则会在显示屏上显示一条关联讯息,并且引发一个错误。

第一个条件成立,结果为真;第二个条件不成立留学之路,在屏幕上输出错误提示。

七、追踪函数的调用轨迹

.trace() 用来追踪函数的调用轨迹。

控制台输出信息:

八、计时功能

.time() 和 .(),用来显示代码的运行时间。

九、.() 的性能分析

性能评估就是考察程序不同部分的执行耗时,识别效率低下的环节,所采用的技术是某种分析方法。

相关推荐

猜你喜欢

大家正在看

换一换