1 분 소요

브라우저 개발자 도구 이용하기

크롬에서 F12키를 눌러 개발자 도구를 표시합니다.

image

요소

html요소가 표시됩니다.

콘솔

간단한 자바스크립트의 결과를 확인할 수 있습니다. console 로 출력한 정보가 표시될 뿐만 아니라, 다음처럼 1 + 2를 입력하여 간단한 명령문을 실행하고 결과를 확인할 수 있습니다. 여러줄 입력을 원할땐 Shift + Enter키를 입력하면 됩니다.

image

console의 주요 함수는 다음과 같습니다.

항목 내용
console.assert(표현식, obj1, obj2...) 표현식이 false인 경우 전달된 obj들을 출력합니다. true인 경우 아무것도 하지 않습니다.
console.dir(obj) obj를 상호 작용이 가능한 트리 형태로 출력합니다.
console.log(obj1, obj2...) obj들을 출력합니다.
console.warn(obj1, obj2...) 경고 중요도로 obj들을 출력합니다.
console.error(obj1, obj2...) 에러 중요도로 obj들을 출력합니다.
console.trace() 스택 추적을 출력합니다.

소스

현 URL의 사이트 폴더 구조와 소스코드를 표시합니다.

Node.js 이용하기

Node.js는 Chrome의 V8 자바스크립트 엔진을 이용한 런타임 환경입니다. 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있으며, 서버 애플리케이션 개발에도 사용됩니다.

  1. Node.js(https://nodejs.org/)에서 다운로드 받고 설치합니다.

  2. 다음처럼 잘 설치되었는지 버전을 확인합니다. npm은 Node.js를 설치할때 자동으로 설치되며, 웹페이지에서 패키지를 다운로드 받아 설치하는 역할을 합니다.

    image

  3. node를 실행하면 가상환경(REPL(Read Eval Point Loop))으로 코드를 직접 실행할 수 있습니다. 종료하려면 Ctrl+C를 2번 누릅니다.

    image

VSCode 이용하기

VSCode를 이용하면 intellisence와 다양한 익스텐션들이 제공되므로 좀 더 쾌적하게 개발할 수 있습니다.

  1. VSCode(https://code.visualstudio.com/download)를 다운로드 받고 설치합니다.

  2. test.js 새파일을 만들고 테스트 코드를 입력합니다.

    1
2
3

     for (var i = 0; i < 3; ++i) {
     console.log("i값 : ", i);
 }

  3. 터미널에서 node test를 실행하여 실행 결과를 확인합니다.(node test.js로 실행해도 됩니다.)

    image

VSCode 익스텐션

Code Runner

Code Runner를 이용하면 Ctrl+Alt+N을 눌러 빠르게 실행 결과를 확인할 수 있습니다.

image

Live Server

Live Server를 이용하면 브라우저 실행을 좀더 편하게 할 수 있습니다.

  1. Activity Bar의 Extensions을 클릭하여 Live Server를 설치합니다.

  2. 그러면 상태 표시줄에 Go Live 버튼이 생깁니다.

    image

  3. index.html과 test.js를 작성합니다.

    image

  4. Go Live 버튼을 클릭하면, 버튼 캡션이 Port:XXXX와 같이 변경되며, index.html이 서버로 로딩되어 브라우저에 표시됩니다.

  5. 코드 수정후 저장하면 변경 내용이 즉시 반영되어 표시됩니다.

  6. 서버를 종료하려면 Port:XXXX을 클릭합니다.

댓글남기기