LiveEdit을 사용해 보자.

1695 단어 PhpStorm
LiveEdit은 "브라우저를 다시로드하지 않고 파일을 동적으로 다시 쓰고 표시"라는 기능입니다.
하지만 대상이 HTML이나 CSS, JS라고 하는 것도 있어 어느 쪽이든 코더, 디자이너, 프런트 엔드 엔지니어를 위한 기능입니다.

사전 준비



먼저 PhpStorm용 플러그인과 브라우저용 Extention을 설치합니다.

최신 PhpStorm7.1에는 기본적으로 LiveEdit 플러그인이 포함되어 있지 않으므로 설치합니다.

[Preferences] - [Plugins] - [Browse repositories...]에서 [Live Edit] 플러그인을 선택하여 설치합니다.

또한 브라우저는 여기에서 Google 크롬을 사용합니다.
Chrome에서 다음 플러그인을 설치합니다.

JetBrains IDE Support

사전 준비는 이것으로 완료됩니다.

움직여 보자



원하는 HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 Debug를 선택합니다.

index.html_-_liveedit_sample_-____Dropbox_100_Programming_php_liveedit_sample_.png

브라우저가 시작되고 "JetBrains IDE Support가이 탭을 디버깅하고 있습니다."라고 표시되면 OK입니다.
HTML이나 CSS 등을 다시 쓰면 동적으로 표시가 반영됩니다.

※반영이 느리거나 Auto Deployment를 설정하고 있어 업로드까지 몇 초가 걸리고 있는 경우는 Synchronize(Ctrl+Cmd+Y)를 누르면 즉시 반영됩니다.

실제로 움직이고 있는 동영상은 이쪽을 봐 주세요.

그건 그렇고 .... PHP도 일단 동작은 합니다만 사용할 수 있는 것은 기본적인 정적 페이지만입니다.
예를 들면 SNS등의 로그인이 필수인 화면이거나 하면 LiveEdit 실행시에 리로드 해 버리므로 사용할 수 없습니다. 그래서 저는 평상시의 개발에서는 사용하지 않습니다.
앞으로의 확장을 기대하고 있습니다.

좋은 웹페이지 즐겨찾기