Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I debug an AngularJS app in Visual Studio 2013 using Grunt?

I am currently trying to debug an AngularJS app I'm writing using Visual Studio 2013. I have the recently released Node.js Tools installed.

The app has been scaffolded using Yeoman/Bower/Grunt and uses the commandline grunt serve command to package and start the localhost webserver.

How do I enable debugging from Visual Studio 2013? Do I have to attach to process, or can I hook it up to the trusty F5 in vs2013, or is it even possible at all?

like image 863
j3r3m7 Avatar asked Mar 26 '14 14:03

j3r3m7


People also ask

What is grunt in AngularJS?

Grunt is very popular build tool for creation build and deployment of application. Grunt JS is responsible to automate all thing after development, it's very handy and easy to use, We have learn how to install grunt and use GRUNT in your application, here is I am describing use of grunt with angular application.

How do I open an existing angular Project in Visual Studio Code?

Now open Visual Studio Code. Go to "File" > "Open Folder" and select "First-Angular-Project" from the "Desktop". Now in the "TERMINAL" run ng new Angular-Project-Demo. Whenever it prompts with something like "Would you like to add Angular routing? (y/N)" press "y" and hit "ENTER".


1 Answers

There is a Visual Studio extension which enables Grunt integration:

  • Grunt Launcher

It adds a right click menu with options to launch Grunt, Gulp and Bower commands. When right clicking on a gruntfile you will see a new submenu listing all your options.

There is also an Angular.js template:

  • Angular.js SPA Template

There are also more advanced solutions:

  • Building with nodeJS Tools for Visual Studio
  • ASP.net SPA Solution Template
  • KarmaVs
  • How Can I Benefit from Grunt for my Visual Studio Based Web Development
  • Grunt your ASP.net Builds
  • Creating a Software Development Kit
like image 188
Paul Sweatte Avatar answered Oct 10 '22 00:10

Paul Sweatte