[모던JS] 004. [소개] 개발자 콘솔
개발자 콘솔이란?
웹 브라우저들에는 자체적인 개발자 도구가 있다. 특히 Chrome이나 Firefox가 그 성능이 우수하다.
윈도우 기준 F12를 누르면 개발자 콘솔이 뜬다. 여기에서 코드의 어느 라인에서, 어떤 에러가 발생했는지 메시지를 보여준다.
다른 브라우저들도 개발자 도구가 있지만 성능이 Chrome이나 Firefox만 못하다.
웹 페이지가 로드되었을 때 이 페이지에서는 에러 내용이 보이지 않는다. F12를 눌러 개발자 콘솔을 열어 콘솔창을 확인해야 비로소 에러 메시지가 출력된다.
Chorome
F12를 누르면 개발자 도구가 열린다. 콘솔에서 에러 메시지와 에러가 발생한 코드의 라인을 알 수 있고, 직접 코드를 타이핑 해볼 수 있다. 당연히 여기서 타이핑한 코드는 HTML이나 JS파일에 저장되는 것이 아니라 내 로컬에서만 보이는 것이다.
멀티 라인으로 여러 줄 코드를 입력할 때는 Enter가 아니라 shift + enter를 누르면 된다.
Firefox, Edge 및 기타 브라우저
마찬가지로 F12를 누르면 개발자 도구가 열린다.
크롬이나 다른 브라우저나 기본적인 사용 방법은 동일하다.
Safari
Mac 전용인 사파리에서는 '개발자 메뉴(Develop menu)'를 명시적으로 활성화 해주어야 한다.
환경설정(preferenes) - 고급(advanced) - 메뉴 막대에서 개발자용 메뉴 보기에서 체크박스를 체크하여 개발자 도구를 활성화
이후부터 Cmd + Opt + C를 눌러 개발자 콘솔을 여닫을 수 있다.
'Programing > JavaScript' 카테고리의 다른 글
[모던JS] 006. [기본] 코드 구조(문, 주석) (0) | 2024.03.25 |
---|---|
[모던JS] 005. [기본] Hello, world!(JS 작성법, 내외부 스크립트) (0) | 2024.03.25 |
[모던JS] 003. [소개] 코드 에디터 (0) | 2024.03.25 |
[모던JS] 002. [소개] 매뉴얼과 명세서 (0) | 2024.03.25 |
[모던JS] 001. [소개] 자바스크립트란? (1) | 2024.03.23 |
댓글