Editor: nine Console commands that allow easier debugging js
First, the commands that display information
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
</script>
</body>
</html>The most common is the console.log.
II: placeholder
The concentration of the above-described support console printf format placeholder, the placeholder supported are: Character (% s), integer (% d or% i), float (% f) and the object (% o):
| Placeholder | effect |
|---|---|
| %s | String |
| %d or %i | Integer |
| %f | Float |
| %The | Expandable DOM |
| %THE | DOM properties listed |
| %c | The format string supplied css style |
<script type="text/javascript">
console.log("%d年%d月%d日",2011,3,26);
</script>effect:
% O,% O are used to output an object Object, Object object ordinary, no difference between the two, but not the same when the print dom node:
// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开
console.log('%o',document.body.firstElementChild);
// 像JS对象那样访问DOM元素，可查看DOM元素的属性
// 等同于console.dir(document.body.firstElementChild)
console.log('%O',document.body.firstElementChild);% C placeholder is most commonly used. When using placeholder% c, the latter parameter must correspond CSS statement to the output CSS rendering content. Common output in two ways: text styles, images output.
Text output
console.log("%cHello world,欢迎您！","color: red; font-size: 20px");
//输出红色的、20px大小的字符串：Hello world,欢迎您！In addition to plain text, but also output as known almost the same console panel character painting. These characters can be generated online painting:
Probably methods: using an online tool to generate characters painting, and then copied to the sublime, delete the beginning of each line wrap, and replaced \ n. Only the last line of code, i.e., to ensure that no line breaks, and finally thrown console.log ( "") code can, of course, may be added in combination make a more cool% c effect (console default output is not a line feed) .
Image Output
Since the console can not be defined img, therefore replaced with background images. In addition, console does not support the width and height, and font-size with a space in place; padding may also be used instead of line-height, and width and height.
Do not want too much trouble, you can try to console-image this plugin.
Third, information packets
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.ido321.com)");
console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条:程序爱好者QQ群： 259280570");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();
</script>
</body>
</html>effect:
Fourth, view an object's information
console.dir () to display an object for all properties and methods.
<script type="text/javascript">
var info = {
blog:"http://www.ido321.com",
QQGroup:259280570,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>effect:
Fifth, display the contents of a node
console.dirxml () to display the html / xml page code for a node (node) included.
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客：www.ido321.com</h3>
<p>程序爱好者:259280570,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>effect:
Sixth, to determine whether a variable is true
console.assert () is used to determine whether a variable or expression is true. If the result is negative, the output a corresponding information in the console, and an exception is thrown.
<script type="text/javascript">
var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );
</script>A non-zero value is true; and the second determination is false, the error message is displayed in the console
Seven, call the trajectory tracking function.
console.trace () function is used to track calls track.
<script type="text/javascript">
/*函数是如何被调用的，在其中加入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);}
</script>Console output:
Eight, timing function
console.time () and console.timeEnd (), to display the run time code.
<script type="text/javascript">
console.time("控制台计时器一");
for(var i=0;i<1000;i ){
for(var j=0;j<1000;j ){}
}
console.timeEnd("控制台计时器一");
</script>Running time is 38.84ms
Nine, console.profile () performance analysis
Performance analysis (Profiler) is the running time of each part of the analysis program to identify bottlenecks, the method used is console.profile ().
<script type="text/javascript">
function All(){
alert(11);
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();
</script>FIG Output:
More professional front-end knowledge, make the [2048] ape www.mk2048.com