Console Api 让 JS 调试更简单、高效

除了console.log 你还知道其他调试方法吗？

所有Console Api <script><br /> console.dir(console);<br /> </script>显示简单信息<script><br /> console.log(&#039;hello world&#039;);<br /> console.info(&#039;信息&#039;);<br /> console.error(&#039;错误&#039;);<br /> console.warn(&#039;警告&#039;);<br /> </script>   占位符<script><br /> console.log(&#039;%d-%d-%d,%s&#039;,2016,08,21,&#039;中国女排夺的冠军！&#039;);<br /> </script>   统计代码执行次数<script><br /> function getInfo()<br /> {<br /> console.count(&#039;执行次数:&#039;);<br /> }<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> </script>  显示分组信息<script><br /> console.group("第一组信息");<br /> console.log(&#039;第一组：自定义消息1&#039;);<br /> console.log(&#039;第一组：自定义消息2&#039;);<br /> console.log(&#039;第一组：自定义消息3&#039;);<br /> console.groupEnd();<br /> <br /> console.group("第二组信息");<br /> console.log(&#039;第二组：自定义消息1&#039;);<br /> console.log(&#039;第二组：自定义消息2&#039;);<br /> console.log(&#039;第二组：自定义消息3&#039;);<br /> console.groupEnd();<br /> </script>  显示对象信息<script><br /> var TomObj = {<br /> name : "Tom",<br /> sex : "男",<br /> age : &#039;31&#039;,<br /> hobby : "coding..."<br /> };<br /> console.dir(TomObj);<br /> </script>  显示页面信息<div> <br>     <h1 id="console-api">console api</h1> <br> </div> <br> <script><br /> var info = document.getElementById(&#039;console&#039;);<br /> console.dirxml(info);<br /> </script> 判断表达式或变量是否为真<script><br /> var code = 200;<br /> console.assert(code);<br /> console.assert(code == 200);<br /> console.assert(code == 500);<br /> </script>追踪函数的调用轨迹<script><br /> function add(a,b) {<br /> console.trace();<br /> return a + b;<br /> }<br /> <br /> add(1,2);<br /> add(2,3);<br /> add(3,4);<br /> </script>计时功能<script><br /> console.time("控制台计时器") ;<br /> console.log(&#039;Start&#039;);<br /> for(var i=0;i<1000;i++) {<br /> for(var j=0;j<1000;j++){<br /> }<br /> }<br /> console.log(&#039;End&#039;);<br /> console.timeEnd("控制台计时器");<br /> </script>    分析性能<script><br /> function getNews() {<br /> _getAjax_1();<br /> _getAjax_3();<br /> }<br /> <br /> function _getAjax_1 () {<br /> for(var i=0;i<10;i++){<br /> _getAjax_2();<br /> }<br /> }<br /> <br /> function _getAjax_2 () {<br /> for(var i=0;i<100;i++){<br /> _getAjax_3()<br /> }<br /> }<br /> <br /> function _getAjax_3 () {<br /> for(var i=0;i<1000;i++){<br /> }<br /> }<br /> console.profile(&#039;性能分析器&#039;);<br /> getNews();<br /> console.profileEnd();<br /> </script>  温馨提示：尝试用起来吧，让自己爱上控制台！

上传图片，总是失败，效果图，可以查看来源链接。

Thanks ~

来源：http://mp.weixin.qq.com/s?__biz=MjM5NDM4MDIwNw==&mid=2448834664&idx=1&sn=7c4acdacc74ed1db81703be60e5537b1#rd

更多【干货分享】，请关注我的个人订阅号。