Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to debug Angular 2 with Visual Studio 2017

Tags:

angular

visual-studio-2017

Now I'm using Webstorm to code and debug Angular but I don't like this IDE. Is there any way to debug angular with VS 2017 ?

like image 765
ndthanhdev Avatar asked Mar 08 '17 06:03

ndthanhdev

People also ask

How to build and run Angular 2 application using Visual Studio?

Build the Angular 2 application using the folllowing steps, First => make your index.html file as your start up page. Right-click on src/index.html file in the solution explorer and select option “Set As Start Page”. To run your Angular project using Visual Studio via F5, you need to make the following changes,

How to bind drop-down list using Angular 2 with web API?

Step 1 - Create a database (SQL Server). Step 3 - Create a connection with SQL and get data from SQL using Web API. Step 4 - Setup angular2 with Web API. Step 5 - Bind drop-down using Angular 2. Visual Studio 2017. TypeScript (2.2 or greater). Now, set up Angular 2 files with Visual Studio.

How to debug a specific browser in Visual Studio 2019?

In the Attach to Process dialog box, get a filtered list of browser instances that you can attach to. In Visual Studio 2019, choose the correct debugger for your target browser, JavaScript (Chrome) or JavaScript (Microsoft Edge - Chromium) in the Attach to field, type chrome or edge in the filter box to filter the search results.

Is there a way to debug JavaScript code?

Thank you. You can debug JavaScript and TypeScript code using Visual Studio. You can set and hit breakpoints, attach the debugger, inspect variables, view the call stack, and use other debugging features. If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

1 Answers

You can debug Angular inside VS2017. Except there are issues not yet resolved. One is that currently you need to set your breakpoints after you start debugging. (I have VS Pro v15.4.1) To see an example of debugging do the following:

  1. Create a project as a Asp.Net Core Web Application and select the "Angular" project template.

  2. Click the down-arrow next to "IIS Express" and set the Web Browser to Google Chrome.

  3. Start debugging. Chrome will display a message about script debugging being enabled. Eventually your app will displace this message.

  4. Set a breakpoint on "this.currentCount++;" in counter.component.ts.

  5. Navigate to the Counter screen and click "Increment". Your breakpoint will be hit.

Make sure that you do not also have the Chrome Developer tools running at the same time (F12 tools).

like image 163
John Pankowicz Avatar answered Sep 21 '22 15:09

John Pankowicz
Sign in to Comment

Related questions

Set-Cookie Header Not Appearing In Google Chrome
How to reduce the size of node_modules folder
webpack with multiple angular 2 modules
Dynamic og:image angular2
Angular 2 - Posting / Putting multiple forms at once
Use untyped A-Frame components with Angular 2
Using React Component in Angular 2
Compile angular component to HTML with bindings
Using mat-menu as a context menu: getting the positioning right
There is no directive with exportAs set to matAutocomplete
Angular 6 multiple library cross-dependency
Conditionally load module on the empty path in Angular router
Angular Material Tree - Different parent/child types
Object.observe withdrawal and RxJS and Angular 2
Angular 2.0 - Injected Http service is undefined
How to create an angular 2 build folder when using systemjs.config.js
Joining Flattened Data
How to create angular2 library which could be supported by all script loaders
Angular Universal server rendering WebSocket
Unit testing ag-grid in Angular 2

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!