Console Api 讓 JS 調試更簡單、高效-php手册-PHP中文網

首頁

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2016 am 12:00 AM

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

所有Console Api <script><br /> console.dir(console);<br /> </script>显示简单信息<script><br /> console.log('hello world');<br /> console.info('信息');<br /> console.error('错误');<br /> console.warn('警告');<br /> </script> 占位符<script><br /> console.log('%d-%d-%d,%s',2016,08,21,'中国女排夺的冠军！');<br /> </script> 统计代码执行次数<script><br /> function getInfo()<br /> {<br /> console.count('执行次数:');<br /> }<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> </script> 显示分组信息<script><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><br /> var TomObj = {<br /> name : "Tom",<br /> sex : "男",<br /> age : '31',<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

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

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