コンソール API により、JS のデバッグがより簡単かつ効率的になります
- WBOYオリジナル
- 2016-09-01 00:00:251484ブラウズ
除了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>
<スクリプトタイプ="text/javascript"><br>
var info = document.getElementById('console');<br>
console.dirxml(情報);<br>
</script> 式または変数が true かどうかを判断する<script type="text/javascript"><br>
var コード = 200;<br>
console.assert(コード);<br>
console.assert(コード == 200);<br>
console.assert(コード == 500);<br>
</script>関数呼び出しトレースを追跡する<script type="text/javascript"><br>
関数 add(a,b) {<br>
console.trace();<br>
リターン a + b;<br>
}<br>
<br>
add(1,2);<br>
追加(2,3);<br>
追加(3,4);<br>
</script>タイミング関数<script type="text/javascript"><br>
Console.time("コンソールタイマー") ;<br>
console.log('開始');<br>
for(var i=0;i
for(var j=0;j
}<br>
}<br>
console.log('終了');<br>
Console.timeEnd("コンソールタイマー");<br>
</script> パフォーマンスを分析する<script type="text/javascript">
関数 getNews() {<br>
_getAjax_1();<br>
_getAjax_3();<br>
}<br>
<br>
関数 _getAjax_1 () {<br>
for(var i=0;i
_getAjax_2();<br>
}<br>
}<br>
<br>
関数 _getAjax_2 () {<br>
for(var i=0;i
_getAjax_3()<br>
}<br>
}<br>
<br>
関数 _getAjax_3 () {<br>
for(var i=0;i
}<br>
}<br>
Console.profile('パフォーマンス アナライザー');<br>
GetNews();<br>
console.profileEnd();<br>
</script> <br>注意事項: ぜひ使ってみて、このコンソールを気に入ってください。
画像のアップロードは常に失敗します。レンダリングについては、ソース リンクを表示できます。
ありがとう〜
出典: http://mp.weixin.qq.com/s?__biz=MjM5NDM4MDIwNw==&mid=2448834664&idx=1&sn=7c4acdacc74ed1db81703be60e5537b1#rd
もっと[辛口な情報共有]をしたい場合は、私の個人購読アカウントをフォローしてください。
