Debug frontity with visual studio

Hello all,

I’d like to be able to use visual studio as a debugger instead of the typical command of console.log()

I was wondering if anyone has a setup similar to this article: https://medium.com/@arthur.rodzkin/how-to-debug-gatsby-js-build-process-and-html-in-vs-code-6d1a31512b5b

Cheers,
Maurice

Hi @maurice.tadros,

This is more a VSCode question, not a Frontity question.
Still, VSCode have documentation for debugging NodeJS apps with VSCode:

Also, you can setup VSCode to debug the React part or Frontity with Chrome:

Kind regards
Chris

Hi @maurice.tadros

Debugging a Frontity App is no different than debugging any other node.js app or any other Isomorphic React App.

Frontity works with Isomorphic React Apps which means that the same React app will be used to generate HTML from the server and to hydrate/routing your app from the Client Side

Because of this there will be parts of your Frontity project that will be executed in the server and some others in the client (in the browser) depending on the use case

So, you can debug both server side and client side executions

to debug Server Side executions

For that you can use for example the extensión and steps suggested by @Chris1337

You can also use console.log but the parts executed in the server will output in the terminal

to debug Client Side executions

Here, you can also use console.log but the parts executed in the client side will be displayed in the browsers console

Another option is to use the sentence `debugger`` which will stop the execution of the client side code at a specific point in your browser’s Developer Tools

To have more info about your React Components used in your Frontity App you could also use React Developer Tools

Hope this helps

Thank you both for the answer.

Just to add more info regarding this topic, we have on our roadmap a plan to create a frontity admin UI that will include a dev tool that would be similar to redux DevTools or overmind DevTools

This should make debugging Frontity apps more transparent!