Static part of Forge Custom UI application debugging using Chrome DevTools

Hi Colleagues,

I’m trying to set up my development environment and I’ve made progress in setting up the simple Forge Custom UI application using the appropriate tutorial. I’m using TypeScript in my project. After successfully setting up the Forge tunnel, I made a breakpoint using the Forge Tunnel “debugger;” command, and figured out that Chrome Devtools can break only on the backend part of the Forge Custom UI application (src\index.tsx with resolver implementation), but I can’t break the static part of the application (static\AppName\App.tsx and Index.tsx files) - Devtools simply don’t show static folder at all. Can you advise how to set up the debug process for the static part of the Forge Custom UI application? It will be best to find out how to set up VS Code for this purpose, but any alternatives are much appreciated.

Hello,

but I can’t break the static part of the application (static\AppName\App.tsx and Index.tsx files) - Devtools simply don’t show static folder at all.

Can you show us a screenshot illustrating what are you trying to do?

As far as I remember, front-end debugging can be done directly from the browser tab in which you’re accessing your Jira+app. You should then have two separate debuggers, one in browser completely separate tab for backend (for which you obtained URL from forge tunnel --debug output), and the second debugger for the front-end part.

Can’t say about VS Code integration, I’m not a user :cry:.

Thank you very much @stefan-ok!

You are right - I can see the front part when I debug directly from the browser tab and can use breakpoints there.

Maybe you can share some documentation on how to set up debugging of the front-end and back-end of the Forge app in any other IDE? Then I either will try the same approach using VS Code, or migrate to IDE, which allows me to debug Forge apps inside.

Unfortunately not. As much as I’d love to hook my Jetbrains IDEA debugger into Forge’s back-end part, I’ve failed at achieving that and in the end decided to just go with the provided browser-based debugger :see_no_evil:. And for the front-end debugging I’m used to Chrome debugger anyway, so… Can’t help you on integrating Forge with IDE. Maybe other devs reading this thread will help. :crossed_fingers:

1 Like

Thank you very much, @stefan-ok

1 Like