Debugging Ionic Own Components

Hi!
I’m trying to find some documentation regarding this problem, maybe it is too basic, but I can’t find a “contributing” section self-explanatory enough.

While I am able to place breakpoints in Dev-tools in the TS files of my angular components, I’d like to add also breakpoints in the components provided by ionic (directives from @ionic/angular and components from @ionic/core). However the files living in node-modules are all JS.
Is there any way to debug ionic own components? Which is the best way?

Thx a lot!

I’d start off by asking what are you trying to debug? Are you running into an issue?

If you open up the devtools, you should be able to open the source files for the components as they are loaded.

Hi Mike!
I am just trying to learn how to debug the TSX files of the Ionic components.
I think I can share an improvement in the ion-tab-bar, ion-tab-button for angular. So there are 3 things to look about. From @ionic/core the Stencil components tab-bar.tsx and tab-button.tsx, and from @ionic/angular in directives/navigation the ion-tabs.ts. Since these 3 things are communicating via events emitted, first thing I want to do is to 1) Debug the behavior, so I can undeestand better when and why events are emitted, and then 2) modify the components locally so I can double check my enhancement doesnt break things 3) Share with you my patch/hack for review through a PR.

The first stone I found is:
Step 1.
I have a small Angular app which basically is loading the Ionic components, however @ionic/core is loaded as JS not TSX, since it is already compiled in node_module. My DevTools shows under webpack:// folder “. / node_modules/ @ionic / core /dist /esm/“ just JS files.

Since seemed that this was not the proper approach because the components using by my app were already compiled to JS. My approach was to download the ionic-feamework repo where I can find the TS of the components and under “angular and “core” folders seems to be “test/test-app” for these components/directive.

I am open to any better way to understand how to debug the ionic components.

Then I will move into 2) Issue: modifying the library and using my custom one instead the official to check how my app behaves.

Any ideas for the Step number 1)?

Thanks a lor!

Getting caught up here… Why do you need to debug the component specifically when it is JSX? The approach we usually use is to modify the compiled components inside node_modules and restart the dev server.

We also just updated our contributing guide for contributing to the Angular/React/Vue integrations as well as verifying your changes in a test app: ionic-framework/CONTRIBUTING.md at e8fe117c34cf8a4a15a1e29c238f9b4682cc6de9 · ionic-team/ionic-framework · GitHub