Javascript调试利器console的使用方法

2019-05-1715:01:50WEB前端开发Comments2,172 views字数 2474阅读模式

一、Console API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Console.assert()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

以参数为标识记录调用的次数,调用时在console打印标识以及调用次数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

方法的别称,使用方法可以参考()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印一条错误信息,使用方法可以参考 string substitution。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

error方法的别称,使用方法参考()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印树状结构,配合groupCollapsed以及groupEnd方法;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Collapsed()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

使用方法和group相同,不同的是groupCollapsed打印出来的内容默认是折叠的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

End()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

结束当前Tree文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Console.info()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印以感叹号字符开始的信息,使用方法和log相同文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印字符串,使用方法比较类似C的printf格式输出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

可以以第一个参数为标识,开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似,具体可参考chrome profiles文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

End()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

配合profile方法,作为数据收集的结束。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

将数据打印成表格。 [en-US]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

计时器,接受一个参数作为标识。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

End()
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

接受一个参数作为标识,结束特定的计时器。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

()
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印stack trace.
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Console.warn()
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

打印一个警告信息,使用方法可以参考 string substitution。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

二、用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

1、文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

旧版兼容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

 if(!){  = {log: function(){} }; }

输出对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

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

格式化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

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

输出对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

("%o",);
("%O",);

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

("%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 上图片出不来文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Firefox  下测试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

不过网上有一个有趣的东西 ,chrome自带的有扩展 https://github.com/jffry/-chrome-extension文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

("");
("");
("");
("");

源代码地址:https://github.com/adriancooney/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

2、/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

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")

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

3、///文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

("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");

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

4、 在页面console文档中查看堆栈跟踪的详细介绍和示例.这个比较好用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

foo();

function foo() {
  function bar() {
    ();
  }
  bar();
}

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

5、//xml//文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

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]);

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

6、Other Command Line API文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

inspect(.firstChild);
getEventListeners(document);

var player1 = {    "name": "Ted",    "level": 42}
keys(player1);

function sum(x, y) {    return x + y;}
monitor(sum);

monitorEvents(window, "resize");

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

7、debugger 非常好用的一个工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

brightness  = function() {  
	debugger;    
	var r = (*255);
	var g = (*255);
	var b = (*255);
	return (r * 77 + g * 150 + b * 29) >> 8;
}
brightness();

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

调试的时候还可以加断点什么的……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

8、jquery相关  firequery文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

$.fn.log = function() {
    if ( && ) {
        (this);
    }
    return this;
}

$('').find(':baz').log().hide();

这样就可以 easily check inside jQuery chains.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

Javascript调试利器console的使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/12536.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/12536.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定