常用Console命令，让js调试更简单

2024-04-27 15:04:52

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用Console命令，让js调试更简单</title> <style> .center { height: 500px; background:#888; } .center p{ background: #fafafa; position: relative; top: 50%; transform: translateY(-50%); } </style> <script type="text/javascript" src="./jquery-1.8.2.min.js"></script></head><body> <div class="center"> <p> 1、委托代理业务通过客户端发单律师在线报价机制，律师将获得更多案源机会； 2、客户在线向平台支付律师服务费，并由平台对律师费进行托管； 3、服务完成或确认线下达成交易后，平台向律师所在律师事务所支付律师费； 4、律师事务所与律师自行结算律师费。 </p> </div> <div id="info"> <h3>我的博客：www.ido321.com</h3> <p>程序爱好者：259280570，欢迎你的加入</p> </div> <script type="text/Javascript"> //一、显示信息的命令 console.log('hello'); //普通信息 console.info('信息');//提示信息 console.error('错误');//错误信息 console.warn('警告');//警示信息 //二：占位符 console.log("%d年%d月%d日",2011,3,26); //格式成可展开的的DOM，像在开发者工具Element面板那样可展开 console.log('%o',document.body.firstElementChild); // 像JS对象那样访问DOM元素，可查看DOM元素的属性 // 等同于console.dir(document.body.firstElementChild) console.log('%O',document.body.firstElementChild); //输出红色的、20px大小的字符串：Hello world,欢迎您！ console.log("%cHello world,欢迎您！","color: red; font-size: 20px"); //三、信息分组 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(); //四、查看对象的信息 //console.dir()可以显示一个对象所有的属性和方法。 var info1 = { blog:"http://www.ido321.com", QQGroup:259280570, message:"程序爱好者欢迎你的加入" }; console.dir(info1); //五、显示某个节点的内容 //console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。 var info = document.getElementById('info'); console.dirxml(info); //六、判断变量是否是真 //console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。 //1是非0值，是真；而第二个判断是假，在控制台显示错误信息 var result = 1; console.assert(result); var year = 2014; console.assert(year == 2018); //七、追踪函数的调用轨迹。 //console.trace()用来追踪函数的调用轨迹。 //函数是如何被调用的，在其中加入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);} //八、计时功能 //console.time()和console.timeEnd()，用来显示代码的运行时间。 console.time("控制台计时器一"); for(var i = 0;i< 1000;i++){ for(var j = 0;j < 1000;j++){} } console.timeEnd("控制台计时器一"); //九、console.PRofile()的性能分析 //性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。 function Foo(){　　　　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('性能分析器一');　　Foo();　　console.profileEnd(); //十、统计代码被执行的次数 function myFun(){ console.count('myFun被执行的次数：'); } myFun(); myFun(); //keys和values前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。 var myObj = {name:'angela',sex:'female',hobby:'programs'}; keys(myObj); </script></body></html>

上一篇：jquery-取得当前节点(包含当前)下的html

下一篇：JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解