Javascript调试利器console的使用方法
一、Console API
Console.assert()
判断第一个参数是否为真，false的话抛出异常并且在console输出相应信息。
()
以参数为标识记录调用的次数，调用时在console打印标识以及调用次数。
()
方法的别称，使用方法可以参考()
()
打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。
()
打印一条错误信息，使用方法可以参考 string substitution。
()
error方法的别称，使用方法参考()
()
打印树状结构，配合groupCollapsed以及groupEnd方法;
Collapsed()
使用方法和group相同，不同的是groupCollapsed打印出来的内容默认是折叠的。
End()
结束当前Tree
Console.info()
打印以感叹号字符开始的信息，使用方法和log相同
()
打印字符串，使用方法比较类似C的printf格式输出
()
可以以第一个参数为标识，开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似，具体可参考chrome profiles
End()
配合profile方法，作为数据收集的结束。
()
将数据打印成表格。 [en-US]
()
计时器，接受一个参数作为标识。
End()
接受一个参数作为标识，结束特定的计时器。
()
打印stack trace.
Console.warn()
打印一个警告信息，使用方法可以参考 string substitution。
二、用法
1、
旧版兼容
if(!){ = {log: function(){} }; }
输出对象
var someObject = { str: "Some text", id: 5 };
(someObject);
//Object {str: "Some text", id: 5}
格式化
%s 格式string %d or %i 格式int %f 格式float %o 格式Object对象 %O 格式object对象 %c 格式css
输出对象
("%o",);
("%O",);
("%c",'padding:77px 219px; background:url() no-repeat;line-height:166px;height:166px;');
("%d",5+5);
("%f",);
("%s","This is a good idea");
("%cCss Style","text-shadow:1px 1px 1px rgba(0,0,0,2);font-size:40px");
Google chrome 46.0.2490.71 m 上图片出不来
Firefox 下测试
不过网上有一个有趣的东西 ，chrome自带的有扩展 https://github.com/jffry/-chrome-extension
("");
("");
("");
("");
源代码地址：https://github.com/adriancooney/
2、/
var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
("My first car was a", car, ". The object is: ", someObject);
for (var i=0; i<5; i++) {
("Hello, %s. You've called me %d times.", "Bob", i+1);
}
("I want to print a number:%d","string")
3、///
("This is the outer level");
();
("Level 2");
();
("Level 3");
("More of level 3");
End();
("Back to level 2");
End();
("Back to the outer level");
("answer time");
alert("Click to continue");
End("answer time");
4、 在页面console文档中查看堆栈跟踪的详细介绍和示例.这个比较好用
foo();
function foo() {
function bar() {
();
}
bar();
}
5、//xml//
var list = ('');
(list[0].childNodes.length > 10 , "Oops,this is small");
function login(user) {
("Login called for user '" + user + "'");
}
login("join");
login("join");
login("join");
login("chen");
();
function connectToServer() {
var errorCode = 1;
if (errorCode) {
("Error: %s (%i)", "Server is not responding", 500);
}
}
connectToServer();
var list = ("");
xml(list[0]);
6、Other Command Line API
inspect(.firstChild);
getEventListeners(document);
var player1 = { "name": "Ted", "level": 42}
keys(player1);
function sum(x, y) { return x + y;}
monitor(sum);
monitorEvents(window, "resize");
7、debugger 非常好用的一个工具
brightness = function() {
debugger;
var r = (*255);
var g = (*255);
var b = (*255);
return (r * 77 + g * 150 + b * 29) >> 8;
}
brightness();
调试的时候还可以加断点什么的……
8、jquery相关 firequery
$.fn.log = function() {
if ( && ) {
(this);
}
return this;
}
$('').find(':baz').log().hide();
这样就可以 easily check inside jQuery chains.
