3

I have an application developed in MEAN stack. I have server.js file which uses ‘http’ node module to start the server on port ‘4030’ locally. My chrome browser is already configured with remote debugging enabled

--remote-debugging-port=9222 

So to debug the angular application locally this what I have been doing:

1>Start http server from windows node command prompt which starts the server on localhost:4030

 Node server.js 

2>In chrome, browse the application on http://localhost:4030
3>In chrome, open one more tab, and browse http://localhost:9222 -> select my application running on localhost:4030 -> select source -> and debug the application
This has been working fine.

I am using Visual Studio Code for development and I was able to debug Node code without any issue in Visual Studio Code. However,now I also wanted to debug angular application in Visual Studio Code. I followed the article here but I am not able to attach debugger to angular. Here is what I have done

1> Installed extension in Visual Studio Code

 ext install debugger-for-chrome 

2> Chrome is already configured with remote debugging enabled. In the "target" field, appended

--remote-debugging-port=9222 

Visual Studio Code's root folder is "C:\src\MyApp" Here are the physical file path of my application:

 C:\src\MyApp\.vscode\launch.json C:\src\MyApp\integration\server.js C:\src\MyApp\integration\angular\js\app.js C:\src\MyApp\integration\angular\views\index.html 

index.html is start page

 <html lang="en" dir="ltr" data-ng-app="MyApp"> <head> </head> <body> <div class="container" data-ui-view> <div id="footer"> </div> <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="/bower_components/angular/angular.js"></script> Some more javascript reference here.... <script type="text/javascript" src="/js/app.js"></script> </body> </html> 

Questions
I am not sure what configuration values i should use in launch.json file?
Does Visual Studio Code has built-in server or start server separately as im doing right now and attach Visual Studio Code?

3
  • Hi have you ever got VSCode to debug Angular I still cannot do itCommentedMay 17, 2016 at 20:28
  • No. I haven not able to debug angular in Visual Code yet.
    – LP13
    CommentedMay 17, 2016 at 20:31
  • Thanks for replying, I will let you know if I ever get it workingCommentedMay 17, 2016 at 20:34

1 Answer 1

2

I followed the instructions here to get debugging working with my Angular app. I am using the launch request type though as it is more reliable for me than the attach request type.

BTW, VSCode does not come with a built-in web server, so I created an IIS website that points to the root director of my Angular app, and then in launch.json, I added a launch config that uses 'url' launch method (something like: http://localhost/myangularapp/index.html).

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.