devsync

KO | EN

gitlite — search

#ios #framework #openai #redis #typescript #claude-code #awesome-list #python #graphql #database

(★ 8)

sync edits in chrome devtools, with localhost

파일 탐색기

ZIP 다운로드

- devsync.js
- patch.diff
- socket.io.min.js
- - some.js
- - default.css
- index.html
.gitignore
.npmignore
bin.js
chromiumer.sh
devsync.coffee
devsync.js
package.json
README.md
screenshot.jpg

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

The hack is basically a bridge between chrome ```devtools``` (WebInspector) and localhost editing.

As web developers, we spend quite some time on ```devtools``` (if using chrome). Each time, we try some changes on the site, replicate them to files on the localhost, and then again switch back to the browser and do refresh. This hack tries to make the cycle simpler. Do the edits in ```devtools```, once you are ready, push a button (or a keyboard shortcut 'Ctrl+Alt+s' ) and the changes will go back to the localhost files (js and css changes) and site itself will be refreshed. And yes, editing the localhost file also refreshes the page on browser (ex: just Alt+Tab to it).

## How to make it work:
You would need node.js and npm for this to work. If you have both installed, all you need is to execute
```sudo npm install -g https://github.com/ciju/devsync/tarball/master```. Successful installation will make ```devsync``` command available on the system.

To use it, run it from you project directory. The first time it runs, it will download an instance of ```chromium``` and patch ```devtools``` to allow file sync. This will bring up an instance of ```chromium```, on which you can edit css/js. You also need to run you default localhost server (ex: whatever you run while testing/developing your app/site on localhost).

Once you are ready with the changes to be saved, use the button pointed in the image below or keyboard shortcut ```'Ctr+Alt+s'```.

If your generated files are hosted from a separate directory (ex: jekyll servers), you can specify the directory as a parameter ex: ```devsync _site\```.

A ```test-site``` is included in the repo. Put its path in apache configuration, run ```devsync``` from its root, and play with it.

## Internals:

Check the <a href="https://github.com/ciju/devsync/wiki/Internals">wiki page</a>.

## note:
- In the inspector, only the style groups showing the file name save edits to the localhost files.
- Have tested it on linux (Ubuntu). Create issues or send in patch, if you find problems with installing it on Mac.
- Doesn't work on windows.

devsync

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

devsync

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README