草庐IT

JavaScript Console 对象

runoob 2023-03-28 原文

Console 对象用于 JavaScript 调试。

JavaScript 原生中默认是没有 Console 对象，这是宿主对象（也就是浏览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

Console 对象常见的两个用途：

  • 显示网页代码运行时的错误信息。
  • 提供了一个命令行接口，用来与网页代码互动。

以 Chrome浏览器为例，我们可以通过按 F12 或者 Control+Shift+i（PC平台）/ Alt+Command+i（Mac平台）来打开 Console 窗口。

Console 对象方法

方法 描述 实例
assert() assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。 
// 实例
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立
clear() 清除当前控制台的所有输出，将光标回置到第一行。 
console.clear()
count() 用于计数，输出它被调用了多少次。 
(function() {
  for (var i = 0; i < 5; i++) { 
    console.count('count'); 
  }
})();
error() 输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。 
console.error("Error: %s (%i)", "Server is not responding",500)
group() 用于将显示的信息分组，可以把信息进行折叠和展开。 
console.group('第一层');
  console.group('第二层');

    console.log('error');
    console.error('error');
    console.warn('error');

  console.groupEnd(); 
console.groupEnd();
groupCollapsed() 与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。 
console.groupCollapsed('第一层');
  console.groupCollapsed('第二层');

    console.log('error');
    console.error('error');
    console.warn('error');

  console.groupEnd(); 
console.groupEnd();
groupEnd() 结束内联分组 
console.group('Group One');
console.group('Group Two');

// some code

console.groupEnd(); // Group Two 结束
console.groupEnd(); // Group One 结束
info() console.log 别名，输出信息 
console.info("runoob")
log() 输出信息
console.log("runoob")
table() 将复合类型的数据转为表格显示。 
var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];
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.timeEnd('计时器2');
timeEnd() 计时结束 
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.warn("警告")

常用 Console 调试命令

实例



console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');

尝试一下 »

最常用的就是 console.log 了。

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

占位符 作用
%s 字符串
%d or %i 整数
%f 浮点数
%o 可展开的DOM
%O 列出DOM的属性
%c 根据提供的css样式格式化字符串

实例



console.log("%d年%d月%d日",2011,3,26);

尝试一下 »

效果：

%o、%O 都是用来输出 Object 对象的，对普通的 Object 对象，两者没区别，但是打印dom节点时就不一样了：

实例



// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开 
console.log('%o',document.body.firstElementChild); 
// 像JS对象那样访问DOM元素，可查看DOM元素的属性 
// 等同于console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

尝试一下 »

效果：

%c 占位符是最常用的。使用 %c 占位符时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。常见的输出方式有两种：文字样式、图片输出。

文字输出

实例



console.log("%c菜鸟教程！","color: red; font-size: 20px"); 
//输出红色的、20px大小的字符串：菜鸟教程,欢迎您！

尝试一下 »

效果：

除了普通文本，还能输出面板一样的字符画。这些字符画是可以在线生成的：

大概方法：使用在线工具生成字符画，然后复制到sublime中，将每行开头的换行删除，且替换成\n。最后只有一行代码，即保证没有换行，最后再丢到 console.log("")代码中即可，当然，也可以添加结合 %c 做出更酷炫的效果(console 输出默认是不换行的)。

图片输出

实例



console.log("%c","background:url(https://static.runoob.com/images/runoob-logo.png) no-repeat;padding:50px 300px;line-height:120px");

尝试一下 »

由于 console 不能定义 img，因此用背景图片代替。此外，console 不支持 width 和 height，利用空格和 font-size 代替；还可以使用 padding 和 line-height 代替宽高。

三、信息分组

实例



console.group("第一组信息");
  console.log("第一组第一条");
  console.log("第一组第二条");
console.groupEnd();
  
console.group("第二组信息");
  console.log("第二组第一条");
  console.log("第二组第二条");
console.groupEnd();

尝试一下 »

四、查看对象的信息

实例



var info = {
  site:"http://www.runoob.com",
  name:"菜鸟教程"
};
console.dir(info);

尝试一下 »

五、显示某个节点的内容

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

实例



<div id="info">
  <h3>菜鸟教程</h3>
  <p>学的不仅是技术，更是梦想！</p>
</div>
<script type="text/javascript">
  var info = document.getElementById('info');
  console.dirxml(info);
</script>

尝试一下 »

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

实例



var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );

尝试一下 »

1 是非 0 值，为 true ；而第二个判断是 false，在控制台显示错误信息。

七、追踪函数的调用轨迹

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

实例



/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/
function add(a,b){
  console.trace();
  return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

尝试一下 »

控制台输出信息：

八、计时功能

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

实例



console.time("控制台计时器一");
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");

尝试一下 »

九、console.profile() 的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是 console.profile()。

实例



function All() {
  alert(1);
  for (var i = 0; i < 10; i++) {
    funcA(1000);
  }　　　　
  funcB(10000);　　
}
 
　　
function funcA(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}
 
　　
function funcB(count) {　　　　
  for (var i = 0; i < count; i++) {}　　
}
 
console.profile('性能分析器');
All();　　
console.profileEnd();

尝试一下 »

JavaScriptConsolespanclasshl

有关JavaScript Console 对象的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  4. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  5. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  6. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调

  7. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  8. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  9. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  10. ruby-on-rails - ActiveRecord 对象相等 - 2

    根据ActiveRecord::Base的文档:==(comparison_object)Returnstrueifcomparison_objectisthesameexactobject,orcomparison_objectisofthesametypeandselfhasanIDanditisequaltocomparison_object.id.Notethatnewrecordsaredifferentfromanyotherrecordbydefinition,unlesstheotherrecordisthereceiveritself.Besides,ifyoufet

随机推荐