Visual Studio Code를 브라우저 내 개발자 도구 편집기로 사용할 수 있다면 어떨까요?

반응형

프런트 엔드 워크플로우가 다음과 같은 작업을 수행하는 것은 드문 일이 아닙니다.

• 일을 하다.
• 자동으로 새로 고친 브라우저에서 보세요.
• 뭐가 잘못됐나 봐
• DevTools에서 검사하고 수정합니다.
• 내 코드 편집기에서 올바른 코드를 적용합니다.
• 브라우저에서 올바른 코드가 자동으로 새로 고쳐지는지 확인합니다.

알아요, 항상 좋은 건 아니에요. 하지만 내 주머니에 있는 보풀도 비슷할 거야 적어도 가끔씩은 말이야

그래서 Chris Heilman의 게시물 제목에 끌렸습니다: "만약 당신이 Visual Studio Code를 브라우저 개발자 도구의 편집자로 사용할 수 있다면?"

이 아이디어는 VS Code를 DevTools의 편집기로 사용할 수 있으며 Microsoft Edge와 함께 실험적인 기능으로 활성화함으로써 오늘날 이를 수행할 수 있다는 것입니다. Prime-time ready universal은 아니지만 Chris가 기능을 활성화하고, VS Code를 DevTools에 연결하고, DevTools에 파일 쓰기 액세스 권한을 부여한 다음, 로컬 URL 페이지를 검사하는 과정을 지켜보십시오.

 

이제 DevTools에서 변경한 내용을 VS Code로 다시 동기화할 수 있으며 DevTools에서 특정 파일을 열고 볼 수 있는 권한이 있습니다. DevTools에서 변경한 내용은 VS Code 파일에 다시 반영되며, VS Code에서 변경한 내용은 브라우저에서 라이브로 업데이트됩니다. 훌륭해.

이것이 엣지를 넘어서는 것이 될지는 모르겠지만 플랫폼 간의 크로스오버 작업은 저를 정말 흥미롭게 합니다.

직접 링크