1. 정보를 표시하는 명령
코드는 다음과 같습니다.
<! doctype html> <html> <head> <title> 공통 콘솔 명령 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> </head> <스크립트 type = "text/javaScript"> console.log ( 'hello'); console.info ( 'Information'); console.error ( 'error'); console.warn ( '경고'); </script> </body> </html>
가장 일반적으로 사용되는 콘솔은 Console.log입니다.
둘 : 자리 표시 자
위의 콘솔 농도는 Printf 자리 표시 자 형식을 지원합니다. 지원되는 자리 표시자는 문자 (%s), 정수 (%d 또는%i), 부동 소수점 번호 (%f) 및 물체 (%o)입니다.
코드는 다음과 같습니다.
<script type = "text/javaScript"> console.log ( " %d 년 %d Month %d day", 2016, 8, 20); </script>
효과:
3. 정보 그룹화
코드는 다음과 같습니다.
<! docType html> <html> <head> <title> 공통 콘솔 명령 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> </head> <body <script type = "text/javascript"> console.group ( "첫 번째 그룹 정보"); Console.log ( "첫 번째 그룹 항목 1 : 내 기술 블로그 (https://segmentfault.com/u/learnme)"); console.log ( "첫 번째 그룹 항목 2 : my github (https://github.com/specialcoder/)"); Console.groupend (); Console.group ( "두 번째 그룹 정보"); Console.log ( "두 번째 그룹 첫 번째 : 프로그램 애호가"); Console.log ( "두 번째 그룹 Second : 오신 것을 환영합니다"); Console.groupend (); </script> </body> </html>
효과:
4. 객체의 정보를 봅니다
Console.dir ()는 객체의 모든 속성과 메소드를 표시 할 수 있습니다.
코드는 다음과 같습니다.
<script type = "text/javaScript"> var info = {블로그 : "https://segmentfault.com/u/learnme/", github : "https://github.com/specialcoder/", 메시지 : "프로그램 애호가가 참여하는 것을 환영합니다"}; console.dir (info);효과:
5. 노드의 내용을 표시합니다
Console.dirxml ()는 웹 페이지 노드에 포함 된 HTML/XML 코드를 표시하는 데 사용됩니다.
코드는 다음과 같습니다.
<! docType html> <html> <head> <title> 공통 콘솔 명령 </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> </head> <body> <div id = "info"> <h3> 내 블로그 : https./smault.//smecault.//U/UGMETFO./SUMPALT. 애호가, 당신은 가입 할 수 있습니다 </p> </div> <script type = "text/javaScript"> var info = document.getElementById ( 'info'); console.dirxml (info); </script> </body> </html>
효과:
6. 변수가 참인지 결정하십시오
Console.assert ()는 표현식 또는 변수가 True인지 결정하는 데 사용됩니다. 결과가 아니오 인 경우 해당 메시지가 콘솔에서 출력되고 예외가 발생합니다.
Assert는 프로그램 정확성을 보장하는 좋은 기능입니다. 디버깅 도구가 장착 된 브라우저 에서이 기능은 Console.Assert ()를 호출하여 구현할 수 있습니다.
코드는 다음과 같습니다.
<script type = "text/javaScript"> var result = 1; Console.Assert (결과); var 년 = 2014; Console.Assert (Year === 2018, "Assertion Evention"); </script>
Console.Assert () 문서에서 첫 번째 매개 변수는 수행 해야하는 주장의 결과이며, 이는 정상적인 상황에서 사실이어야합니다. 두 번째 매개 변수는 오류가 발생하면 콘솔에 인쇄 된 오류 메시지입니다.
1은 0이 아닌 값이며 사실입니다. 두 번째 판단은 거짓이며 콘솔에 오류 메시지가 표시됩니다.
결과 표시 :
7. 함수의 호출 트랙을 추적하십시오
Console.trace ()는 함수의 통화 트랙을 추적하는 데 사용됩니다.
코드는 다음과 같습니다.
<script type = "text/javaScript">/*함수가 호출되는 방법, console.trace () 메서드를 추가하십시오*/function add (a, b) {console.trace (); A+B를 반환합니다. } var x = add3 (1,1); 함수 add3 (a, b) {return add2 (a, b);} 함수 add2 (a, b) {return add1 (a, b);} 함수 add1 (a, b) {return add (a, b);} </script>콘솔 출력 정보 :
8. 타이밍 기능
console.time () 및 console.timeend ()는 코드의 실행 시간을 표시하는 데 사용됩니다.
코드는 다음과 같습니다.
<script type = "text/javaScript"> console.time ( "count 1000*1000"); for (var i = 0; i <1000; i ++) {for (var j = 0; j <1000; j ++) {}} console.timeend ( "count 1000*1000"); </script>실행 시간은 10.64ms입니다
9. Console.profile ()의 성능 분석
성능 분석 (Profiler)은 프로그램의 각 부분의 실행 시간을 분석하고 병목 현상을 찾는 것입니다. 사용 된 방법은 console.profile ()입니다.
코드는 다음과 같습니다.
<script type = "text/javaScript"> function all () {alert (11); for (var i = 0; i <10; i ++) {funca (1000);} funcb (10000); } function funca (count) {for (var i = 0; i <count; i ++) {}} function funcb (count) {for (var i = 0; i <count; i ++) {}} console.profile ( 'Performance Analyzer'); 모두(); Console.profileend (); </script>LZ 테스트 중에 모든 ()에 경고가 추가되지 않았으며 제어 막대가 출력되지 않았다고 설명하겠습니다. 추가 후 성능 분석 테이블이있었습니다. 그 이유는 아직 명확하지 않았습니다. 알고 있다면 댓글을 달 수 있습니다.