브라우저 개발자도구 콘솔창 활용 팁
브라우저별 개발자 도구가 계속 발전하고 있어서 웹 개발과 디버깅 시간이 많이 단축되었다. 개발자 도구가 없을땐 어떻게 개발했는지 생각도 안날 만큼 친숙해져있다.
개발자 도구에 많은 기능이 있지만 콘솔 API 만 조금 살펴보자.
JavaScript 테스트할때 console.log() 많이 사용할텐데 이번 기회에 알록달록 색상도 넣어보자.
개발자 도구 콘솔창 단축키 브라우저 Windows Linux Mac 크롬(Chrome) Ctrl + Shift + J Ctrl + Shift + J Cmd + Option + J 파이어폭스(FireFox) Ctrl + Shift + K Ctrl + Shift + K Cmd + Option + K 사파리(Safari) Ctrl + Alt + C - Cmd + Option + C 인터넷 익스플로러(Internet Explorer11) F12 - -
명령어 정리
각 API에 대한 브라우저별 지원 여부는 MDN 사이트 잘 정리되어 있으니 참고하자. 명령어/예제 설명 console.log(document); 메시지를 표시한다. console.debug(document); console.log 와 동일하다. console.warn(document); "경고" 아이콘과 같이 메시지를 표시한다. console.error(document); "오류" 아이콘과 같이 메시지를 표시한다. console.info(document); "정보" 아이콘과 같이 메시지를 표시한다. console.dir(document); 개체의 속성이 표시된다. console.trace(1, 2, 3); 호출 스택을 표시한다. console.assert('test'.length < 2, "length >= 2"); 데이터 확인도 가능하다. console.count('count_test'); "count_test"가 호출된 수만큼 증가된 숫자가 표시된다. console.time('time_test'); con…
댓글 16개
gaerae
파이어폭스 콘솔창에 메시지 출력은 "Tabzilla"라는 JS 파일에서 관리되고 있었다. 별도의 페이지도 존재한다. https://bedrock.readthedocs.org/en/latest/tabzilla.html
gaerae
위 리스트 중 "Krugle"은 코드 검색 플랫폼을 판매하는 회사로 해당 플랫폼을 테스트하고 입증하기 위한 서비스 페이지라고 보면 될거 같은데, 만약 회사에서 코드 관리 목적으로 이러한 플랫폼이 필요하다면 고려해 볼만한 플랫폼인거 같다.
gaerae
남의 코드를 보고 싶을때, Github와 같은 프로젝트 단위의 사이트는 이해해야하는 시간적 문제가 있지만 이런 간단한 코드 공유 사이트는 단일 파일인 경우가 많아 잠깐 훝어보기에 적합하다.
gaerae
간단한 코드 테스트하기에 정말 좋은 서비스다. 자주 이용하고 있다.
gaerae
언어별 커뮤니티 사이트를 보여주는 그래프를 만들어봐도 재미있을거 같다.
gaerae
서브라임텍스트에서는 euc-kr 문서 작업은 적합하지 않다. euc-kr 문서가 많다면 다른 에디터 사용을 권장한다.
gaerae
버전관리는 개발팀에서는 안쓸 이유가 없다. 그리고 어떤 버전관리 시스템을 쓰는 지는 중요하지 않다.
gaerae
정말 좋은 프로젝트들이 많다. 그리고 계속 새로운 프로젝트들이 생기고 있다. Github는 개발자를 잘 이해하는 서비스인거 같다.
gaerae
PHP7 기대가 많이된다.
gaerae
명령어는 짧은데 막상 필요할때 한번에 써지지 않는다...
gaerae
개인적으로 너무 만족하며 구독하고 있다. 여행지 선택하기도 좋고 여행가서 먹을 집 찾는데도 도움이된다.
gaerae
줄리아 헬로우 월드만 찍어보고 다음 진행을 못하고 있다...
gaerae
페북 프론트엔드 개발그룹(https://www.facebook.com/groups/webfrontend)에서 좋은 지적이 있어 내용에 살작 추가했다.
console.log는 ie8이하 버전에서 오류를 발생한다. 물론 해결 방법은 있지만 알고 사용하는 것과 모르고 사용하는것은 다르니 명시해서 나쁠 것이 없다는거에 동의한다.
