Webclipse Code Live (HTML LIVE Viewer) 설정하기

내가 웹클립스 플러그인을 설치한 이유는 Code Live 를 사용하기위해서 설치한것이다.

물론 덤으로 Javascript 코딩도 편하게 하기위함도 있지만...

일단 이클립스에 서버가 설치되어있어야 한다.. 나같은 경우에는 Tomcat 8.0 이 설치되어 이클립스와 연동되어있다.

해당 서버가 실행된 상태에서 마우스 우측버튼을 클릭하면 아래와 같인 Context Menu가 뜬다.

CodeLive 라고 있는데 이게 체크되어있어야 한다...

체크된 상태에서.. 웹브라우저로 해당 HTML 을 호출해 보면 아래 그림과 같이

우측에 요상한 pop menu가 있을것이다.. 이게 바로 CodeLive 를 설정하는 메뉴 인것이다.

메뉴버튼  을 클릭해보자. ( 아직은 LIVE Code 가 활성화된 상태가 아님)

아래와 같은 Modal 이 하나 뜰텐데 Code Live 할 HTML 파일이나 Css 파일을 선택해주고 닫기를 누르자. 그러면 이제 코드 Live 하기위한 준비 끝!!

이제 브라우저를 띄워놓은 상태에서 이클립스의 코드를 수정하면???

브라우저에 실시간으로 반영되어 보여진다...

직접 다들 해보시길.. 

물론 HTML 파일과 JSP 파일도 지원하며 JSP 서버 코드도 라이브로 반영시킨다.

아래는 테스트 동영상