chrome调试javascript详解

console.log方法的别称,使用方法可以参考Console.log()

Console.dir()

打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。

Console.error()

打印一条错误信息,使用方法可以参考 string substitution。

Console._exception()

error方法的别称,使用方法参考Console.error()

Console.group()

打印树状结构,配合groupCollapsed以及groupEnd方法;

Console.groupCollapsed()

使用方法和group相同,不同的是groupCollapsed打印出来的内容默认是折叠的。

Console.groupEnd()

结束当前Tree

Console.info()

打印以感叹号字符开始的信息,使用方法和log相同

Console.log()

打印字符串,使用方法比较类似C的printf格式输出

Console.profile()

可以以第一个参数为标识,开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似,具体可参考chrome profiles

Console.profileEnd()

配合profile方法,作为数据收集的结束。

Console.table()

将数据打印成表格。Console.table [en-US]

Console.time()

计时器,接受一个参数作为标识。

Console.timeEnd()

接受一个参数作为标识,结束特定的计时器。

Console.trace()

打印stack trace.

Console.warn()

打印一个警告信息,使用方法可以参考 string substitution。

二、用法

1、Console.log

旧版兼容

if(!window.console){ window.console = {log: function(){} }; }

输出对象

var someObject = { str: "Some text", id: 5 }; console.log(someObject); //Object {str: "Some text", id: 5}

格式化

%s 格式string
%d or %i    格式int
%f  格式float
%o  格式Object对象
%O  格式object对象
%c  格式css

输出对象

console.log("%o",document.body); console.log("%O",document.body);

chrome调试javascript详解

console.log("%c",'padding:77px 219px; background:url() no-repeat;line-height:166px;height:166px;'); console.log("%d",5+5); console.log("%f",Math.PI); console.log("%s","This is a good idea"); console.log("%cCss Style","text-shadow:1px 1px 1px rgba(0,0,0,2);font-size:40px");

Google chrome 46.0.2490.71 m 上图片出不来 

chrome调试javascript详解

Firefox 41.0.2 下测试

chrome调试javascript详解

不过网上有一个有趣的东西 console.image,chrome自带的有扩展 https://github.com/jffry/console.image-chrome-extension

console.image("");
console.image("");
console.image("");
console.image("");
源代码地址:https://github.com/adriancooney/console.image

2、console.info/console.log

var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
console.info("My first car was a", car, ". The object is: ", someObject);
 
for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
console.log("I want to print a number:%d","string")

chrome调试javascript详解


3、console.group/console.warn/console.time/console.debug

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

chrome调试javascript详解

4、console.trace 在页面console文档中查看堆栈跟踪的详细介绍和示例.这个比较好用

foo(); function foo() { function bar() { console.trace(); } bar(); }

chrome调试javascript详解

5、console.assert/console.count/console.dirxml/console.dir/console.error

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggyzw.html