Microsoft Edge 개발자 도구가 드디어 Visual Studio 마켓플레이스에 공개되었습니다. 이 도구를 활용하면 개발자가 Visual Studio를 떠나지 않고도 ASP.NET 및 ASP.NET Core 프로젝트를 손쉽게 미리 볼 수 있습니다. 단순히 결과 화면을 확인하는 데 그치지 않고, Edge 개발자 도구의 요소(element) 기능으로 수정한 내용이 실제 소스 코드에 그대로 반영되기 때문에 생산성 측면에서 큰 이점을 제공합니다.
CSS와 DOM 요소를 실시간으로 편집
현재 미리 보기(Preview) 상태인 이 도구는 Visual Studio에서 CSS 스타일이나 웹 요소를 변경할 때마다 웹 애플리케이션을 실시간으로 미리 보고 편집할 수 있게 해줍니다. 흥미로운 점은 반대 방향으로도 동작한다는 것입니다. 즉, Edge 개발자 도구 창에서 수정한 내용이 곧바로 소스 코드에 적용되므로, 디버깅과 스타일 조정 작업을 훨씬 빠르게 진행할 수 있습니다. 아래 예시를 통해 도구가 실제로 작동하는 모습을 확인해 보세요.
미리 보기 단계에서의 한계
미리 보기 단계에 있는 기능은 언제든 추가되거나 제거될 수 있다는 점을 유념해야 합니다. 현재 시점에서 일부 개발자에게는 기능이 부족하게 느껴질 수 있습니다. 대표적으로 Blazor 프로젝트는 아직 지원하지 않지만, 해당 지원을 비롯한 여러 개선 사항이 곧 제공될 예정입니다.
설치 방법과 시스템 요구 사항
이 확장 프로그램을 사용하려면 Visual Studio 2022 17.1 이상 버전이 필요합니다. 최신 버전은 Visual Studio 다운로드 페이지에서 받을 수 있습니다. 확장 프로그램 설치 후에는 [도구] → [옵션] 메뉴에서 관련 설정을 구성해야 정상적으로 사용할 수 있습니다. 더 자세한 정보는 Visual Studio 마켓플레이스의 해당 확장 프로그램 다운로드 페이지를 참고하시기 바랍니다.