Console Api 讓 JS 調試更簡單、高效
- WBOY原創
- 2016-09-01 00:00:251516瀏覽
除了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
更多【乾貨分享】，請關注我的個人訂閱號碼。
