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('console');<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('Start');<br />     for(var i=0;i<1000;i++) {<br />         for(var j=0;j<1000;j++){<br />         }<br />     }<br />     console.log('End');<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('效能分析器');<br />     getNews();<br />     console.profileEnd();<br /> </script>  溫馨提示：試著用起來吧，讓自己愛上控制台！

上傳圖片，總是失敗，效果圖，可以查看來源連結。

Thanks ~

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

更多【乾貨分享】，請關注我的個人訂閱號碼。