title: How to debug angular application in visual studio code?
body: <p>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 </p>
  
  <pre><code>--remote-debugging-port=9222
  </code></pre>
  
  <p>So to debug the angular application locally this what I have been doing:  </p>
  
  <p>1>Start http server from windows node command prompt which starts the server on localhost:4030</p>
  
  <pre><code> Node server.js
  </code></pre>
  
  <p>2>In chrome, browse the application on <a href="http://localhost:4030" rel="nofollow noreferrer">http://localhost:4030</a><br>
  3>In chrome, open one more tab, and browse <a href="http://localhost:9222" rel="nofollow noreferrer">http://localhost:9222</a> -> select my application running on localhost:4030 -> select source -> and debug the application<br>
  This has been working fine.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/31075856/visual-studio-code-debugging-with-angularjs">here</a> but I am not able to attach debugger to angular. Here is what I have done  </p>
  
  <p>1>  Installed extension in Visual Studio Code       </p>
  
  <pre><code> ext install debugger-for-chrome
  </code></pre>
  
  <p>2>  Chrome is already configured with remote debugging enabled. In the "target" field, appended</p>
  
  <pre><code>--remote-debugging-port=9222
  </code></pre>
  
  <p>Visual Studio Code's root folder is "C:\src\MyApp" Here are the physical file path of my application:</p>
  
  <pre><code> 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  
  </code></pre>
  
  <p>index.html is start page</p>
  
  <pre><code>  &lt;html lang="en" dir="ltr" data-ng-app="MyApp"&gt;
      &lt;head&gt;    
      &lt;/head&gt;
      &lt;body&gt;    
          &lt;div class="container" data-ui-view&gt;
          &lt;div id="footer"&gt;        
          &lt;/div&gt;
  
          &lt;script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/bower_components/angular/angular.js"&gt;&lt;/script&gt;
  
           Some more javascript reference here....   
  
          &lt;script type="text/javascript" src="/js/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p><strong>Questions</strong><br>
  I am not sure what configuration values i should use in launch.json file?<br>
  Does Visual Studio Code has built-in server or start server separately as im doing right now and attach Visual Studio Code?</p>