Angularjs – How to debug angular application in visual studio code

angularjsdebuggingvisual-studio-code

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?

Best Answer

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).

Related Topic