Debugging the front end and back end

- [Narrator] In this video, I will talk about…debugging the application.…As a developer it is extremely important to know…how to debug the application.…Here we have two slides, front end and back end.…To debug the front end we can use…Chrome's developer tool.…Just go to Chrome and press f12.…Now here we will see the source mapped files…under web pack content src.…We see all the five listed,…let's go to menubox.tsx…and lets say we want to debug the function…'get login status'.…

So I put a break point here,…and another break point here.…Now refresh the page,…so you know at the start of the application…we are calling 'get login status'.…So we are hitting this break point now…now let's press f10 to execute that line…and let's press continue…and now we are back to this particular line.…We want to see what you are getting here,…so press f10 and this variable is men…and that is expected because I have not logged in.…

Let's continue, let's try another place…maybe load menus from server,…Let's put a break point here,…if you want to see,…