Console Api를 사용하면 JS 디버깅을 더 쉽고 효율적으로 수행할 수 있습니다.
- WBOY원래의
- 2016-09-01 00:00:251447검색
除了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 type="text/javascript"><br>
var info = document.getElementById('console');<br>
console.dirxml(정보);<br>
표현식이나 변수가 true인지 확인<script type="text/javascript"><code class="prettyprint linenums lang-php"><script type="text/javascript"><br>
var code = 200;<br>
console.assert(code);<br>
console.assert(code == 200);<br>
console.assert(code == 500);<br>
</script>
변수 코드 = 200;<script type="text/javascript"><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>
console.assert(코드);<script type="text/javascript"><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>
console.assert(코드 == 200);<script type="text/javascript"><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>
console.assert(코드 == 500);
추적 함수 호출 추적<script type="text/javascript"></script>
함수 add(a,b) {<br>
console.trace();<br>
a + b를 반환합니다.<br>
}<br>
<br>
추가(1,2);<br>
추가(2,3);<br>
추가(3,4);<img src="/Uploads/editor/2016-08-15/57b17985776f1.jpg" alt="Console Api를 사용하면 JS 디버깅을 더 쉽고 효율적으로 수행할 수 있습니다." >
<br>타이밍 기능<code class="prettyprint linenums lang-php"><script type="text/javascript"></script>
Console.time("콘솔 타이머") ;<p class="da_word">
console.log('시작');<think id="ad_196de4c105c1d8be">
for(var i=0;i<1000;i++) {</think>
for(var j=0;j
}</p>
}
console.log('종료');
console.timeEnd("콘솔 타이머");
성능 분석<code class="prettyprint linenums lang-php"><script type="text/javascript">
함수 getNews() {
_getAjax_1();
_getAjax_3();
}
함수 _getAjax_1 () {
for(var i=0;i<10;i++){
_getAjax_2();
}
}
함수 _getAjax_2 () {
for(var i=0;i<100;i++){
_getAjax_3()
}
}
함수 _getAjax_3 () {
for(var i=0;i<1000;i++){
}
}
Console.profile('성능 분석기');
GetNews();
console.profileEnd();
알림: 한번 사용해보시고 콘솔의 매력에 빠져보세요!
사진 업로드는 항상 실패합니다. 렌더링의 경우 소스 링크를 볼 수 있습니다.
감사합니다~
출처: http://mp.weixin.qq.com/s?__biz=MjM5NDM4MDIwNw==&mid=2448834664&idx=1&sn=7c4acdacc74ed1db81703be60e5537b1#rd
더 자세한 [마른 정보 공유]를 원하시면 제 개인 구독 계정을 팔로우해주세요.