Console Api 讓 JS 調試更簡單、高效

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

所有Console Api <script type="text/javascript"><br>     console.dir(console);<br> </script>显示简单信息<script type="text/javascript"><br>     console.log('hello world');<br>     console.info('信息');<br>     console.error('错误');<br>     console.warn('警告');<br> </script>   占位符<script type="text/javascript"><br>     console.log('%d-%d-%d,%s',2016,08,21,'中国女排夺的冠军！');<br> </script>   统计代码执行次数<script type="text/javascript"><br>     function getInfo()<br>     {<br>         console.count('执行次数:');<br>     }<br>     getInfo();<br>     getInfo();<br>     getInfo();<br>     getInfo();<br> </script>  显示分组信息<script type="text/javascript"><br>     console.group("第一组信息");<br>         console.log('第一组：自定义消息1');<br>         console.log('第一组：自定义消息2');<br>         console.log('第一组：自定义消息3');<br>     console.groupEnd();<br> <br>     console.group("第二组信息");<br>         console.log('第二组：自定义消息1');<br>         console.log('第二组：自定义消息2');<br>         console.log('第二组：自定义消息3');<br>     console.groupEnd();<br> </script>  显示对象信息<script type="text/javascript"><br>     var TomObj = {<br>         name  : "Tom",<br>         sex   : "男",<br>         age   : '31',<br>         hobby : "coding..."<br>     };<br>     console.dir(TomObj);<br> </script>  显示页面信息<div id="console"><br>     <h1>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

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