크롬에서 편집하면 소스에도 반영! chrome-devtools-autosave 소개

http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

링크를 보고 '그래 이거야!' 싶어서 따라해봄.

먼저 클라이언트 사이드 준비

주소창에 chrome://flags/ 를 쳐서 

실험실 확장 프로그램 API

실험실 확장 프로그램 API를 사용합니다. 확장 프로그램 갤러리에서는 실험실 API를 사용하는 확장 프로그램을 업로드할 수 없습니다.

를 찾아 '사용'을 체크하거나

Chrome Hack : Cross-Domain 문제를 피하는 법 에서 언급한 것처럼

인자값에 --enable-experimental-extension-apis 를 추가한다.

Windows 에선

단축아이콘을 만들고  대상 항목 뒤에 --enable-experimental-extension-apis 를 추가

OSX 에선

open -b com.google.chrome --enable-experimental-extension-apis 로 실행

하면 되겠다.

실험실 확장 프로그램 API 사용을 위해 크롬을 재시작하고

Download 를 설치한다.

클라이언트 준비는 이걸로 끝.

그다음 서버쪽 설치인데

npm install -g autosave

하고 

$ autosave 

를 실행하면 끝

이러면 일단 file:// 형식에 대해선 오케이.

그런데 실제 웹사이트일을 하고 있을땐 file:// 타입을 사용하는 경우는 드물다.

그럴땐 설정 파일을 만들고

https://github.com/NV/chrome-devtools-autosave/issues/7#issuecomment-3182946

처럼 적용하면 된다.

내 경우는 http://localhost/~유저명/ 형식을 사용하고 OSX 웹공유 기능을 쓰고 있어서

routes.js

exports.routes = [{

    from: /^http:\/\/localhost\/~([^\/]*)/,

    to: '/Users/$1/Sites/'

}];

이렇게 설정하고

autosave --config routes.js

해서 쓴다.

chrome://settings/extensions 에 들어가서

DevTools autosave1.0

를 찾아서 옵션 찍고 Resource 를 ^file:// 에서 ^http://localhost/

따위로 바꿔준다.

그나저나 onResourceContentCommitted 라는 이벤트가 있구나. 크롬 이 무서운 놈들;;