Reputation: 34149
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?
Upvotes: 3
Views: 6765
Reputation: 15137
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).
Upvotes: 2