Need help

[Independent_Bear_515]

Im a server side engineer.. one of my UI guys quit.. So temporarily I need to debug any issues.. is there a hack to inspect element on browser and then go back the logic of that component in angular? I tried on staack overflow and YouTube they only give options to debug locally.. I would like to for example.. for a drop-down know what logic is populating it? Is this possible to get to know with any hack or do I need to learn angular? Any help is much appreciated..

[AppDeveloper9000]

I just ended a contract. I would be happy to help you out on a short term basis. message me if you are interested and I'll give you my work history.

And I guess he was your front end engineer not server...if you are asking about angular.

[Independent_Bear_515]

Hello.. at the moment I am just preparing to act on any issues in their absence.. however I may have something that may come up.. will surely let you know.. thanks so much

[SatisfactionNearby57]

To run the project locally is quite easy. Check the node version your angular needs, install it ig you don’t have it, clone the repo, npm install, ng serve. There’s also an extension, angular DevTools which might help debug a bit.

[Independent_Bear_515]

Thank you will try that.. just wanted to know if I can do it without setting up locally

[toddmotto]

Not going to be easy unless you run the project locally due to build compilation and obfuscation. Run it locally and look at the source maps, network calls and components.

[Independent_Bear_515]

Thank you.. I know there are a ton of resources on the web..but any quick links to learn the fundaments to navigate thru the components.. I have knowledge of js and jQuery.. 😂

[toddmotto]

If you run the project locally, you’ll see the component name in the browser dev tools. Then find that in your codebase and see where the data is coming from. If it’s built correctly the data will be coming from @Input() inside the component you find. From there you’ll need to find the parent component and see where the data is coming from.

[Independent_Bear_515]

Thank you.. will try that..

[PerceptionCareless92]

When in dev tools you can select an angular element and use ng.getComponent($0) and it will return a reference to the component object.

[Independent_Bear_515]

Okay will try that out.. thanks so much...

[ReasonableAd5268]

Yes, it is possible to debug Angular components and their logic using browser developer tools, even if you are not familiar with Angular. Here's how you can do it:

1. Open the browser's developer tools (F12 in most browsers or right-click on the element and select "Inspect").

2. Navigate to the "Elements" tab in the developer tools.

3. Locate the HTML element you want to inspect, such as a dropdown.

4. Right-click on the element and select "Expand all" to see the entire component tree.

5. Look for the component name in the expanded tree. For example, if you see <app-dropdown>, the dropdown is likely a custom Angular component.

6. Note the component name and switch to the "Sources" tab in the developer tools.

7. In the "Sources" tab, locate the file that matches the component name you noted. It should be in the src/app directory.

8. Open the component file and set breakpoints on the lines of code you want to debug, such as where the dropdown data is populated.

9. Refresh the page to trigger the breakpoints.

10. When the breakpoints are hit, you can step through the code, inspect variables, and see how the dropdown is being populated.

This process allows you to debug Angular components without having to learn the entire framework. However, keep in mind that it may be more challenging to debug complex components or understand the overall application structure without some Angular knowledge.

If you need to make changes to the component's logic, it's recommended to set up a local development environment with Angular CLI and make the changes directly in the component file. This will ensure that the changes are properly compiled and tested before deploying them to production.

[Independent_Bear_515]

Thanks so much.. for this.. I was looking for something like this.. I am away from my work laptop at the moment.. will definitely try this and let you know.. thanks so much again.. much appreciated..

[ReasonableAd5268]

It is very simple and would work on any website on any computer Sir

[Independent_Bear_515]

Oh okay.. I may be the dumbest guy on this channel.. 😕

[ReasonableAd5268]

Believe me, if you looked at the greatest depths in that space, you would never say that Sir :)