# Edge 다음 버전 부터 브라우저 내 개발 도구로 VSCode 사용 가능

> Clean Markdown view of GeekNews topic #5233. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5233](https://news.hada.io/topic?id=5233)
- GeekNews Markdown: [https://news.hada.io/topic/5233.md](https://news.hada.io/topic/5233.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-10-21T10:27:37+09:00
- Updated: 2021-10-21T10:27:37+09:00
- Original source: [christianheilmann.com](https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/)
- Points: 9
- Comments: 3

## Topic Body

"Open Source files in VS Code"

- 브라우저에서 프론트 엔드 코드 디버깅중 변경한 코드가 실제 저장 가능

ㅤ→ 로컬에서 작업 중일 경우 브라우저에서 자동 인식해서 루트 폴더를 선택하도록 하고, 하드 접근 권한을 요청

ㅤ→ 승인하면 DevTools 의 모든 링크가 브라우저의 Source 창 대신 VSCode에서 열리고 해당 파일 위치로 이동

ㅤ→ DevTools에서 수정한 내용이 VSCode에 바로 적용되고, VSCode에서 수정 후 저장하면 브라우저에도 싱크

- Settings-Experiments 에서 켜야 만 동작

## Comments



### Comment 7336

- Author: ragus
- Created: 2021-10-22T09:50:05+09:00
- Points: 1

근데 요즘에는 순수 HTML, CSS, JS 사용해서 개발하기 보다는 Typescript 쓰거나 SPA 개발을 많이해서 webpack 같은 툴을 통해서 빌드해야되는데 이 기능이 실제로 유용할까 싶은 의문이 있네요

### Comment 7323

- Author: babo3yong2
- Created: 2021-10-21T12:40:34+09:00
- Points: 2

https://vscode.dev/

공개한거 같네요

### Comment 7332

- Author: xguru
- Created: 2021-10-22T09:05:45+09:00
- Points: 1
- Parent comment: 7323
- Depth: 1

아 요거는 약간 다른거 같아서 별도 기사로 올렸습니다!

- vscode.dev 공개 https://news.hada.io/topic?id=5235