Console Api 让 JS 调试更简单、高效
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
更多【干货分享】,请关注我的个人订阅号。

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ketahui tentang contoh kod pengenalan untuk pengaturcaraan Python

Pembolehubah PHP dalam tindakan: 10 contoh penggunaan sebenar

Cara menggunakan PHP untuk menulis kod fungsi pengurusan inventori dalam sistem pengurusan inventori

Java melaksanakan kod isihan gelembung mudah

Contoh pengaturcaraan bahasa Go: contoh kod dalam pembangunan web

Daripada pemula hingga mahir: Pelaksanaan kod struktur data yang biasa digunakan dalam bahasa Go

Panduan Sambungan Pengkomputeran Tepi Awan Huawei: Contoh kod Java untuk melaksanakan antara muka dengan cepat

Panduan dan Contoh: Belajar untuk melaksanakan algoritma isihan pemilihan dalam Java
