달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

웹스톰에서는 디버깅하는 기본적인 기능을 제공합니다.

브레이크 포인트를 지정할 라인의 맨앞쪽의 회색 공간을 마우스로 클릭하면 빨간색 원으로 해당 라인이 브레이크 포인트가 걸린 자리라는 것을 표시해 줍니다.

   

   

Run > Debug

디버깅 시작!

   

index.html 클릭

   

실행 중 자바스크립트의 브레이크 포인트 구문에서 멈춥니다.

   

하단에 Debug 정보 창이 오픈됩니다.

   

Debug정보 창의 우측 상단에

Step Over, Step Into, Force Step Into, Step Out, Run to Cursor명령을 수행하여 단계적으로 실행시켜 변수값을 확인하며 추적할 수 있습니다.

   

Step Into클릭 후 화면

   

Posted by codedragon codedragon

댓글을 달아 주세요

파이어폭스 브라우저에서 디버깅을 수행할 경우

Run > Edit Configurations...실행해 Browser를 FireFox으로 설정합니다.

Apply > OK

   

   

   

   

   

   

   

   

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

설치 파일 다운하기

http://www.jetbrains.com/webstorm/

Get WebStrom 8클릭

   

파일 저장

   

   

   

웹스톰 설치 및 실행

다운 받은 파일 실행

   

   

   

   

   

   

설치 중

   

   

설치 완료!

Run WebStrom체크 > Finish

   

첫번째 선택항목은 이전에 설치된 웹스톱의 설정을 유지하면서 설치하겠다는 항목입니다.

처음 설치하는 경우에는 선택사항을 선택합니다.

I do not have a previouse version of WebStorm or I do not want to import my settings 체크 > OK

   

   

   

   

   

   

프로젝트 생성

Create New Project 클릭

   

Project type: 프로젝트 목적에 따라 HTML5, Node.js등 프로젝트를 선택할 수 있습니다.

   

Project name: hellworld

Project type: Empty project

OK

   

   

소스코드 작성

프로젝트 선택 > 마우스 우클릭 > New > JavaScript File

   

   

   

프로젝트 선택 > 마우스 우클릭 > New > HTML File

   

   

   

   

   

URL입력창 오른쪽의 으로 된 버튼 클릭

   

index.html 선택 > OK

   

Browser우측에서 원하는 디버깅을 하고자하는 브라우저 선택 > OK

   

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

Update 방법1: 아래 상태표시줄의 Check를 클릭하거나

   

업데이트 방법2: Menu > Help > Check for Upate...

   

방법1/방법2클릭하면 아래와 같이 창이 오픈합니다.

Download

   

   

다운로드 받은 파일 실행

   

Yes

   

   

   

   

   

   

   

설치 중

   

   

업데이트 완료!

Run WebStrom체크 > Finish

   

Allow access

   

   

Help > Check for Update…

최신 버전임을 확인

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

   

   

   

   

   

   

   

설치 중

   

   

Run WebStorm체크 > Finish

   

첫번째 선택항목은 이전에 설치된 웹스톱의 설정을 유지하면서 설치하겠다는 항목입니다.

처음 설치하는 경우에는 선택사항을 선택합니다.

I do not have a previouse version of WebStorm or I do not want to import my settings 체크 > OK

   

구매하여 라이선스 키가 있는 경우 Buy WebStorm > User name/License key입력 > OK

그냥 평가판 사용할 경우 -> Evaluate for free for 30 days > OK

   

   

   

OK

   

Create New Project > OK

   

   

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요