"Blank Node.js"템플릿을 사용하여 Visual Studio 2019에서 React 앱을 디버깅하는 방법

debugcn 에 게시 Dev

오션 에어 드랍

이 게시물에 설명 된 단계를 따랐으며 "Blank Node.js 웹 응용 프로그램"에서 Visual Studio 내에 React 응용 프로그램을 성공적으로 만들었습니다.

VS에서 디버깅을 제외한 모든 것이 작동합니다!

나는 또한 내가하고 싶은 일을 정확히 설명하는 이 마이크로 소프트 기사를 따랐다 !!! - "노드 웹앱 템플릿을 사용하여 Visual Studio에서 반응 앱을 설정하는 방법"을 안내합니다. 그 기사에서 그들은 디버깅이 작동하는 것을 보여 주지만 그것은 나를 위해 작동하지 않습니다.

표준 npm 명령을 사용하여 Visual Studio 솔루션 디렉터리 내에 응용 프로그램을 만들고 있습니다. 나는 나를 위해 무거운 작업을 수행하는 배치 파일을 직접 만들었습니다.

npx create-react-app ssm-app --typescript

이 시점에서 모든 것이 잘 작동하며 VS 내부에서 NPM 패키지와 상호 작용할 수도 있습니다.

심지어 package.json에서 명령 (예 : Start)을 실행할 수있는 Visual Studio 내에 NPM Task Runner를 설치했습니다 .

Visual Studio 내부에서 디버깅을 제외한 모든 것이 작동합니다 !

그런 다음 VS에서 "Start Debugging"버튼을 연결하여 npm start명령 을 연결하려고했습니다 .

I did that by adding by finding this Microsoft article on how to extend the build process. I added the following code to the project file which works can calls npm start for me.

  </ProjectExtensions>
    <Target Name="AfterBuild">
         <Exec Condition="'$(EnableTypeScript)' == 'true'" Command="npm start" />
    </Target>
</Project>

It kinda works and does kick off a web browser and launch the app but Visual Studio toolbar just hangs. I think this is because npm start hasn't exited. I have tried changing the command to call npm start but it still hangs to toolbar.

Usually when you launch the debugger, the toolbar changes and you can see the stop button like below. That never happens

Any help would be greatly appreciated. Am I doing something wrong or am I approaching this from the wrong angle?

Thanks

Ocean Airdrop

Just closing the loop on this question.

In the end, I found out that the reason why Visual Studio hangs when you extend an .csproj file to call "npm start".

The reason is because the MSBuild "Execute" command blocks and does not exit. I tried prefixing the command with "start" but this has no effect.

https://docs.microsoft.com/en-us/visualstudio/msbuild/exec-task?view=vs-2019

So if you run notepad after the build, the vs output window will hang until you close notepad!

<!-- This wil block! -->
<Target Name="AfterBuild">
     <Exec Command="start notepad.exe" /> 
</Target>

I gave up on my dream of debugging inside visual studio but I still wanted to create a react app using the official npm packages as well as setup a visual studio solution that tied the build command up with "npm start" and and "npm build"

Fortunelty I found this stack overflow post which provided an answer to the Execute Command.

MSBuild exec task without blocking

이를 통해 Visual Studio의 "디버그 빌드"및 "릴리스 빌드"를 프로젝트 파일의 사용자 지정 빌드 대상에 연결할 수있었습니다.

마지막으로, 내가 만든 모든 새로운 React 프로젝트에 대해 비주얼 스튜디오 솔루션을 생성 할 수 있기를 원했기 때문에 원하는 모든 것을한데 묶는 빠른 도구를 만들었습니다.

프로젝트:

시각적 솔루션 프로젝트 파일을 생성합니다.
Visual Studio에서 "빌드 / 디버그"명령을 "npm start"로 설정합니다.
Visual Studio의 "빌드 / 릴리스"명령을 "빌드 실행"으로 설정합니다.

프로젝트는 https://github.com/OceanAirdrop/CreateReactAppVisualStudio 에서 찾을 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

"Blank Node.js"템플릿을 사용하여 Visual Studio 2019에서 React 앱을 디버깅하는 방법

"Blank Node.js"템플릿을 사용하여 Visual Studio 2019에서 React 앱을 디버깅하는 방법

런타임 중에 Visual Studio를 사용하여 Pygame 애플리케이션을 디버깅하는 방법

Visual Studio 2012 prof에서 디버깅 할 파일을 선택하는 방법

Visual Studio를 사용하여 실제 도메인에서 앱을 디버그하는 방법

Visual Studio 2017 도구 체인을 사용하여 vscode에서 C ++ 애플리케이션을 디버깅하는 방법

Visual Studio Team Services 온라인에서 스크럼 작업 그룹을 템플릿으로 사용하는 방법

Visual Studio Community를 사용하여 VBScript를 디버깅하는 방법 (2019)

Visual Studio 2013에서 .NET 콘솔 애플리케이션을 디버깅하는 방법

Excel 템플릿 파일을 포함하여 Visual Studio 2010에서 .exe 설정을 만드는 방법

Windows에서 모노 런타임을 사용하여 Xamarin Studio에서 디버깅하는 방법

Visual Studio Code에서 Angular 다중 프로젝트 작업 영역을 디버깅하는 방법

Visual Studio에서 실제로 Excel 추가 기능 디버깅을 수행하는 방법

VSTO : Visual Studio에서 디버깅 된 후 제거 된 VSTO 추가 기능을 다시 추가하는 방법

Visual Studio에서 디버깅을 위해 웹 폴더를 설정하는 방법은 무엇입니까?

Visual Studio Code를 사용하여 GUI 디버깅 서버 앱

Grunt / Gulp 처리 파일을 사용하여 Visual Studio에서 TypeScript 디버깅

gdb / lldb 디버깅에서 템플릿 멤버 함수가 반환 한 값을 인쇄하는 방법

Visual Studio에서 웹 양식 템플릿을 설치하는 방법은 무엇입니까?

Visual Studio 2017의 기본 템플릿에서 라우팅을 변경하는 방법은 무엇입니까?

Visual Studio Code에서 Lua를 디버깅하는 방법

Visual Studio 디버깅 모드에서 ifstream하는 방법

Visual Studio 2013에서 QFixed를 디버깅하는 방법

Visual Studio 2013 누락 된 프로젝트 템플릿을 수정하는 방법

Premake가 Visual-Studio 프로젝트 템플릿을 사용하도록하는 방법이 있습니까?

cygwin에서 "* .stackdump"파일을 사용하여 디버깅하는 방법

XCode 5를 사용하여 iOS7에서 Cordova 앱을 디버깅하는 방법

Visual Studio를 사용하여 원격 디버깅을위한 기호 파일을 생성하는 방법은 무엇입니까?

Visual Studio 2012에서 응용 프로그램을 디버깅하기 위해 F12를 비활성화하는 방법

ARM 템플릿 내에서 o365 커넥터를 사용하여 논리 앱을 배포하는 방법

Rails 앱 템플릿에 값을 전달하는 방법 (-m)