console 도 API다?
편하게 써왔던 console.log(무언가)
알고보니 console.자체가 API라고한다. 이 콘솔 은 로깅 및 디버깅을 위한 메서드로 사실상 표준에 가깝게 되었다. 원래는 표준이 아니였다는 것.. 그리고 배포된 코드에서는 거의 사용하지 않는게 정상이라고한다.
그래서 어떻게 생긴건가??
검색을 해본결과 Firebug 에서 먼저 만들었다고한다.
파이어버그는 파이어폭스 브라우저에서 작동하는 애드온(addon)이다.
버그를 때려잡는 디버거(degugger)로 전세계 웹개발에 획을 그은 기적같은 툴이란다.
그래서 여기서 주는 기능으로
console : 자바스크립트를 live로 실행하기
css : 문서에서 사용하고 있는 css리스트를 보기
sript : 자바스크립트를 한줄한줄 실행하면서 디버깅하기
Net : 문서를 구성하고 있는 리소스들의 다운로드 현황과 서버와 커뮤니케이션을 하는 내역을 열람할 수 있다.
이후 크롬, 익스플로러, 사파리, Node.js, 등 브라우저부터 그냥 일반 자바스크립트에서도 쓸 수 있게 되었고 각자 다른 구현기능이었던 console api가 같은 동작으로 통일되었음, (아직 그래도 자기만의 기능을 갖기도 함)
사용법
MDN사이트가 잘나와있다, 여기도 좀 정리해보면 클릭
console
로깅, 스택 추적, 타이머, 카운터 등 기초적인 디버깅 기능을 제공한다.
console.log()
일반 메시지 출력
예시
let myString = 'Hello world';
// Output "Hello world" to the console
console.log(myString);
//아니면
console.log("링크를 열 수 없습니다")근데 왜 다른 메소드들 처럼 대문자가 아닌가? mdn은 역사적이유로 인해 모두 소문자로 사용한다고 한다.
다른 메소드들
console.assert()
첫 번째 매개변수가 false인 경우 메시지와 스택 추적을 출력
console.clear()
콘솔의 내용을 지운다.
console.count()
메소드를 호출한 횟수를 출력
console.countReset()
주어진 라벨의 횟수를 초기화
console.error()
오류메시지 출력, 추가 매개변수와 함께 문자열 치환 사용가능
console.group()
새로운 인라인 그룹 생성, 이후 모든 출력을 한단계 들여쓰기, 그룹을 나오려면 groupEnd()사용
console.time()
주어진 이름의 타이머 실행, 최대 10,000개의 타이머 동시에 실행 가능
console.timeEnd()
타이머를 멈추고, 소요시간 출력
console.trace()
스택 추적을 출력
console.warn()
경고 메시지 출력
이렇게 많은데 사실 가장 많이 사용하는 기능은 데이터, 텍스트를 출력하는거다. 이건 중요도를 설정해서 출력할 수 있는데
console.log(), console.info() (en-US), console.warn(), console.error() 각각 출력 스타일이 다르다.
객체 출력하기
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
출력은 이렇다
[09:27:13.475] ({str:"Some text", id:5})
여러 객체 출력하기
var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
console.info("My first car was a", car, ". The object is: ", someObject);
출력은
[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})
문자열도 치환할 수 있다.
for (var i=0; i<5; i++) {
console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
출력은
[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.
출력도 꾸밀수 있다고하는데 안써도 될 것 같다.
한가지 더 신기한 것으로 스택 추적이 있는데
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
결과는 이렇다
왠지 이건 잘 쓸수도 있을 것 같다.
끝!
