Live edit는 Chrome의 extension을 통해 동작하므로 Chrome을 사용해야만 한다.
그 설치 및 설정 방법은 다음과 같다.
1. WebStorm 설정
1) File > Settings를 열어 Build, Execution, Deployment > Debugger > Live edit
2) Update 주기를 manual(default)에서 Auto로 변경
2. Chrome의 JetBrains extension 설치
1) Chrome을 실행하여 확장 프로그램 검색으로 'JetBrains IDE Support'를 찾아 설치한다.
3. 사용해 보기
1) WebStorm에서 프로젝트를 만들어 javascript 파일을 추가하여 아래의 샘플 코드를 붙여 넣는다.
그리고 index.html 파일을 만들어 아래 코드를 붙여 넣는다.
2) Debug 모드로 javascript 파일을 실행시킨다.
3) Chrome을 열어 http://127.0.0.1:8000으로 접속한다.
4) Chrome의 설정 메뉴 옆의 "JB" 아이콘을 오른쪽 마우스 클릭하여 "Inspect in WebStorm"을 선택하면 화면의 Debug중이라는 표시가 된다.
이제 WebStorm의 Html 코드를 수정해 보자.
Hello World대신 Bye World로 수정한 후 Chrome을 보면 즉시 Bye World로 바뀌어 있음을 알 수 있다.
Live edit는 Front-end단 UI 개발에 적합하며, Javascript 코드의 수정에는 즉각 대응하지 않는다는 점을 명심하자.
댓글 없음:
댓글 쓰기