九个Console命令,让js调试更简单By.cllgeek 一、显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</t ...
九个Console命令,让js调试更简单
By.cllgeek
一、显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script type="text/javascript"> 9: console.log('hello'); 10: console.info('信息'); 11: console.error('错误'); 12: console.warn('警告'); 13: </script> 14: </body> 15: </html>
最常用的就是console.log了。
二:占位符console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)
1: <script type="text/javascript"> 2: console.log("%d年%d月%d日",2011,3,26); 3: </script>
效果:
三、信息分组 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script type="text/javascript"> 9: console.group("第一组信息"); 10: 11: console.log("第一组第一条:我的博客(http://cllgeek.github.io)"); 12: 13: console.log("第一组第二条:blog(http://www.cllgeek.com)"); 14: 15: console.groupEnd(); 16: 17: console.group("第二组信息"); 18: 19: console.log("第二组第一条:程序爱好者: 495489065"); 20: 21: console.log("第二组第二条:欢迎你加入"); 22: 23: console.groupEnd(); 24: </script> 25: </body> 26: </html>
效果:
四、查看对象的信息console.dir()可以显示一个对象所有的属性和方法。
1: <script type="text/javascript"> 2: var info = { 3: blog:"http://cllgeek.github.io", 4: :495489065, 5: message:"程序爱好者欢迎你的加入" 6: }; 7: console.dir(info); 8: </script>
效果:
五、显示某个节点的内容console.dir
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <div id="info"> 9: <h3>我的博客:cllgeek.github.io</h3> 10: <p>程序爱好者:495489065,欢迎你的加入</p> 11: </div> 12: <script type="text/javascript"> 13: var info = document.getElementById('info'); 14: console.dir
效果:
六、判断变量是否是真console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
1: <script type="text/javascript"> 2: var result = 1; 3: console.assert( result ); 4: var year = 2014; 5: console.assert(year == 2018 ); 6: </script>
1是非0值,是真;而第二个判断是假,在控制台显示错误信息 一、显示信息的命令
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script type="text/javascript"> 9: console.log('hello'); 10: console.info('信息'); 11: console.error('错误'); 12: console.warn('警告'); 13: </script> 14: </body> 15: </html>
最常用的就是console.log了。
二:占位符console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)
1: <script type="text/javascript"> 2: console.log("%d年%d月%d日",2011,3,26); 3: </script>
效果:
三、信息分组 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script type="text/javascript"> 9: console.group("第一组信息"); 10: 11: console.log("第一组第一条:我的博客(http://cllgeek.github.io)"); 12: 13: console.log("第一组第二条:blog(http://www.cllgeek.com)"); 14: 15: console.groupEnd(); 16: 17: console.group("第二组信息"); 18: 19: console.log("第二组第一条:程序爱好者: 495489065"); 20: 21: console.log("第二组第二条:欢迎你加入"); 22: 23: console.groupEnd(); 24: </script> 25: </body> 26: </html>
效果:
四、查看对象的信息console.dir()可以显示一个对象所有的属性和方法。
1: <script type="text/javascript"> 2: var info = { 3: blog:"http://cllgeek.github.io", 4: :495489065, 5: message:"程序爱好者欢迎你的加入" 6: }; 7: console.dir(info); 8: </script>
效果:
五、显示某个节点的内容console.dir
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <div id="info"> 9: <h3>我的博客:cllgeek.github.io</h3> 10: <p>程序爱好者:495489065,欢迎你的加入</p> 11: </div> 12: <script type="text/javascript"> 13: var info = document.getElementById('info'); 14: console.dir
效果:
六、判断变量是否是真console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
1: <script type="text/javascript"> 2: var result = 1; 3: console.assert( result ); 4: var year = 2014; 5: console.assert(year == 2018 ); 6: </script>
1是非0值,是真;而第二个判断是假,在控制台显示错误信息
原标题:9个Console命令
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。