작년에 우리는 개발자에게 브라우저 개발자 도구를 Visual Studio Code에 포함 할 수 있는 옵션을 제공하는 실험적인 "VS Code 용 요소"확장을 출시했습니다.

오늘 우리는 대폭 개선되어 처음으로 미리보기를 종료하는 새로운 VS Code 확장 용 Microsoft Edge 도구의 일반 공급을 발표하게 되어 기쁩니다.

https://blogs.windows.com/msedgedev/2020/10/01/microsoft-edge-tools-vscode/

이번 릴리스에서는 개발자 도구 기능을 Visual Studio Code로 가져 오는 두 가지 실험적 확장 기능인 요소 및 네트워크 확장 기능을 병합했습니다. 또한 확장 프로그램을 직접 제공하고 구축하기가 더 쉬워졌으며 거친 가장자리를 부드럽게 만들었습니다.

작동 중인 VS Code 용 Edge 개발자 도구 : 서버에 연결, 헤드리스 브라우저 열기, DOM 요소 선택 및 VS Code에서 CSS 편집.

Visual Studio Marketplace에서 다운로드하거나 Visual Studio Code 내에서 설치할 수 있습니다.

편집기에 개발자 도구를 포함하는 이유는 무엇입니까? 

Visual Studio Code에는 개발자로서의 삶을 더 쉽게 만들어주는 많은 기능이 있지만, 경량 프로그래밍 환경이라는 것이 가장 잘하는 일을 올바르게 고수합니다. 하지만 웹용 제품을 만들 때는 프로그래밍만으로는 충분하지 않은 경우가 많습니다. 워크 플로우의 큰 부분은 제품의 모양과 느낌을 조정하는 것입니다. 이것이 브라우저에 내장 된 개발자 도구가 빛나는 곳입니다.

편집기와 브라우저를 지속적으로 전환하면 하루 종일 워크 플로에인지 부하가 ​​추가됩니다. 한 환경에서 다른 환경으로 (개발에서 디버깅 모드로) 변경하고 다시 전환해야 합니다. 그 피드백은 우리가 개발자 도구를 확장 기능에 포함 시키는 방법을 모색하도록 촉구 한 것입니다. 따라서 "개발"사고 방식을 떠나지 않고도 코드가 생성하는 것을 확인하고 디버깅 할 수 있습니다.

확장은 기본 제품에 오버 헤드를 추가하지 않고 필요에 따라 더 많은 기능을 추가 할 수 있는 좋은 방법입니다. 이를 통해 사용자의 피드백을 기반으로 빠르게 이동하고 반복 할 수 있으며 Microsoft Edge 도구를 VS Code로 가져 오는 자연스러운 선택이었습니다.

새로운 헤드리스 및 풀 브라우저 모드 

새로운 Microsoft Edge Tools 확장에는 워크 플로를 단순화하고 더 많은 도구를 통합하기 위한 여러 가지 변경 사항이 포함되어 있습니다.

이 버전에서는 디버깅 할 Microsoft Edge 인스턴스를 시작할 수 있는 방법이 변경되었습니다. 기존 브라우저 인스턴스에 연결하거나 새 인스턴스를 시작하거나 "헤드리스"브라우저를 사용할 수 있습니다. "headless"옵션은 브라우저를 실행하는 데 덜 방해가 되는 방법입니다. 작업 표시 줄에 별도의 아이콘이 없고 자체 브라우저 창이 표시되지 않습니다. 이것은 또한 확장 프로그램이 전경에 있지 않은 브라우저 창을 비활성으로 보고 했기 때문에 Mac 사용자의 오랜 문제를 해결했습니다. 새 브라우저 인스턴스를 헤드리스로 만들 것인지 여부를 확장 설정에서 선택할 수 있습니다.

다음 스크린 캐스트에서 차이점을 확인할 수 있습니다. 일반 모드에서는 상호 작용할 수 있는 전체 브라우저 창이 나타납니다. 확장 프로그램에서 미리보기를 볼 수도 있습니다.

전체 브라우저 모드에서 확장 사용

헤드리스 모드에서는 브라우저가 별도의 창에 표시되지 않습니다.

헤드리스 모드에서 확장 사용

네트워크 창 소개 

네트워크 창은 Microsoft Edge DevTools에서 두 번째로 많이 사용되는 기능이므로 작년에 네트워크 창을 VSCode에 통합하기 위해 별도의 독립 실행 형 확장을 출시했습니다. 경험에 혼란스러운 중복을 도입 한 피드백을 들었으므로 이번 릴리스에서는 두 확장을 하나로 병합합니다. 이제 확장 설정에서 네트워크 탭을 사용하도록 설정할 수도 있습니다.

VS Code 확장 용 Edge Devtools의 네트워크 탭

이 경험에 대한 개발자의 의견을 기다리고 있습니다. 지금은 네트워크 창을 기본적으로 꺼두지만 기본적으로 네트워크 또는 추가 창을 사용할지 여부에 대한 의견을 듣고 싶습니다.