Debug frontity with visual studio

[maurice.tadros]

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

[Chris1337]

Hi @maurice.tadros,

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

Debug Node.js Apps using Visual Studio Code

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

How to set up VSCode to Debug React Apps with Chrome

Kind regards
Chris

[juanma]

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

@Chris1337

Still, VSCode have documentation for debugging NodeJS apps with VSCode:

Debug Node.js Apps using Visual Studio Code

The Visual Studio Code editor includes Node.js debugging support. Set breakpoints, step-in, inspect variables and more.

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

How to set up VSCode to Debug React Apps with Chrome

Debugging your code directly with Visual Studio Code is awesome! Learn how to configure your VSCode to debug your React project.

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

[maurice.tadros]

Thank you both for the answer.

[juanma]

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

DevTools

— Roadmap Card This feature depends on the Connect Middleware one so I’ll update it once we start working on that. User Stories As a Frontity developer I want to see the history of state mutations so that I can debug my app. As a Frontity developer I want to see the action executions so that I can debug my app. As a Frontity developer I want to see what components are subscribe to what parts of the state so that I can debug my app.

Frontity Admin UI

@adamhut114 @SantosGuillamot Just a thought but there’s two ways this feature could be interpreted. It could be about a dashboard for frontity itself Personally I’d be curious to hear what kind of functionality that would give. The big advantages of Wordpress lie primarily on the user experience side when creating content, while most of what frontity is handling is the website and server itself. Another possible interpretation of this is a replacement to Wordpress’ admin panel. In which case…

This should make debugging Frontity apps more transparent!