How to breakpoint or debug on .ts page in angular

Hello Guys, In this post we will talk about how to debug angular components


Step 1 :-

            I have an angular project which name is “Hello-World”.


Step 2 :-

            Run this “Hello-World” project using  below command :-

            ng serve

 

Step 3 :-

            Open running project in “Chrome” browser. And then do “inspect”,

for “inspect” right click on “chrome” browser and click on “inspect” option.


Step 4 :-

            And now go to “sources” tab. Then go to “page -> webpack:// -> . -> src -> app” and here you can see your project component pages. Choose any your project component page folder.

Here I am selecting my component folder “detail”. This folder contains .html, .css and .ts files. Now I will double click on .ts file to apply debugger.

Step 5 :-

            Now I have to apply breakpoints or debugger on .ts page so click on line number for breakpoints.

I am applying breakpoints on “ngOnInit()” in “detail.component.ts” file.


Step 6 :-

            Now when I hit this “detail” page in “chrome” browser and if my “inspect” is open then my breakpoint or debugger is occurred automatically.


Step 7 :-

            If you want to resume debugger or want to go in next line use two option



Comments

Post a Comment

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

          Here We will see how we can call all CRUD methods (GET, PUT, POST, DELETE) with the help of WebClient in c#. you will need to add reference of "System.Web.Extensions" assembly to your project. 1. Call POST API :-     string apiUrl = "http://localhost:26404/api/POSTAPI";     object input = new     {         Name = txtName.Text.Trim()     };     string inputJson = (new JavaScriptSerializer()).Serialize(input);     WebClient client = new WebClient();     client.Headers["Content-type"] = "application/json";     client.Encoding = Encoding.UTF8;     string json = client.UploadString(apiUrl + "/PostCustomers","POST", inputJson); 2. Call GET API :-     string apiUrl = "http://localhost:26404/api/GETAPI";     WebClient client = new WebClient();     client.Headers["Content-type"] = "app...
Read more

Asp.Net MVC 5 authentication and authorization using claims principal

Asp.Net MVC 5 authentication and authorization using claims principal :- Step1 : File -> New Project -> Asp.Net Web Application -> Asp.Net 4.5.2 Templates Choose empty MVC project template Step2 : Install following nuget packages Microsoft.AspNet.Identity.Core Microsoft.AspNet.Identity.Owin Microsoft.Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.Security Microsoft.Owin.Security.Cookies Microsoft.Owin.Security.OAuth Owin Step3 : Create a Owin Startup class and decorate with assembly attribute OwinStartup. using Microsoft.AspNet.Identity; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Owin; [assembly: OwinStartup(typeof(AspNetMVC5Authorization.Startup))]  // here "AspNetMVC5Authorization" is the name of project namespace AspNetMVC5Authorization { public class Startup { public void Configuration(IAppBuilder app) { ConfigureAuthenticat...
Read more