Console Api를 사용하면 JS 디버깅을 더 쉽고 효율적으로 수행할 수 있습니다.

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

所有Console Api <script><br /> console.dir(console);<br /> </script>显示简单信息<script><br /> console.log(&#039;hello world&#039;);<br /> console.info(&#039;信息&#039;);<br /> console.error(&#039;错误&#039;);<br /> console.warn(&#039;警告&#039;);<br /> </script>   占位符<script><br /> console.log(&#039;%d-%d-%d,%s&#039;,2016,08,21,&#039;中国女排夺的冠军！&#039;);<br /> </script>   统计代码执行次数<script><br /> function getInfo()<br /> {<br /> console.count(&#039;执行次数:&#039;);<br /> }<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> getInfo();<br /> </script>  显示分组信息<script><br /> console.group("第一组信息");<br /> console.log(&#039;第一组：自定义消息1&#039;);<br /> console.log(&#039;第一组：自定义消息2&#039;);<br /> console.log(&#039;第一组：自定义消息3&#039;);<br /> console.groupEnd();<br /> <br /> console.group("第二组信息");<br /> console.log(&#039;第二组：自定义消息1&#039;);<br /> console.log(&#039;第二组：自定义消息2&#039;);<br /> console.log(&#039;第二组：自定义消息3&#039;);<br /> console.groupEnd();<br /> </script>  显示对象信息<script><br /> var TomObj = {<br /> name : "Tom",<br /> sex : "男",<br /> age : &#039;31&#039;,<br /> hobby : "coding..."<br /> };<br /> console.dir(TomObj);<br /> </script>  显示页面信息<div> <br>     <h1 id="console-api">console api</h1> <br> </div> <br> <script type="text/javascript"><br /> var info = document.getElementById('console');<br /> console.dirxml(정보);<br /> </script> 표현식이나 변수가 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><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><br /> console.time("控制台计时器") ;<br /> console.log(&#039;Start&#039;);<br /> for(var i=0;i<1000;i++) {<br /> for(var j=0;j<1000;j++){<br /> }<br /> }<br /> console.log(&#039;End&#039;);<br /> console.timeEnd("控制台计时器");<br /> </script>     console.assert(코드 == 200);<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(&#039;性能分析器&#039;);<br /> getNews();<br /> console.profileEnd();<br /> </script>   console.assert(코드 == 500);

추적 함수 호출 추적<script type="text/javascript"><br /> 함수 add(a,b) {<br /> console.trace();<br />          a + b를 반환합니다.<br /> }<br /> <br /> 추가(1,2);<br /> 추가(2,3);<br /> 추가(3,4);<img src="/static/imghwm/default1.png" data-src="/Uploads/editor/2016-08-15/57b17985776f1.jpg" class="lazy" / alt="Console Api를 사용하면 JS 디버깅을 더 쉽고 효율적으로 수행할 수 있습니다." > </script><br>타이밍 기능<code class="prettyprint linenums lang-php"><script type="text/javascript"><br /> Console.time("콘솔 타이머") ;<p class="da_word"> console.log('시작');<think id="ad_196de4c105c1d8be"> for(var i=0;i<1000;i++) { for(var j=0;j<1000;j++){</script>

        } } console.log('종료'); console.timeEnd("콘솔 타이머");   성능 분석<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();<🎜> </script> 알림: 한번 사용해보시고 콘솔의 매력에 빠져보세요! 사진 업로드는 항상 실패합니다. 렌더링의 경우 소스 링크를 볼 수 있습니다. 감사합니다~ 출처: http://mp.weixin.qq.com/s?__biz=MjM5NDM4MDIwNw==&mid=2448834664&idx=1&sn=7c4acdacc74ed1db81703be60e5537b1#rd 더 자세한 [마른 정보 공유]를 원하시면 제 개인 구독 계정을 팔로우해주세요.