One inevitability of being a web developer is that eventually you’ll run into a bug in your code, and the ability to debug your code is an essential skill for any developer, including those working with Frontity.

In essence debugging a Frontity App is no different from debugging any other node.js app, or indeed any other isomorphic React App.

Because Frontity is an isomorphic React application the developer needs to be able to debug their JavaScript on both the client-side and the server-side. This additional complexity can sometimes present certain challenges.

In this episode of Frontity Talks JuanMa and Michael from the Developer Relations team outline a number of techniques you can use for debugging your JavaScript, both in the browser and on the server, using a variety of tools and methods – including debugging server-side node.js code in your IDE/code editor (we demonstrate this using our preferred code editor VS Code).

If you ever run into a problems when developing your Frontity project that you don’t know how to solve then hopefully the techniques in this episode of Frontity Talks will help get you over the hurdles that you’ll inevitably face more quickly.

It’s essential viewing for every web developer working with Frontity, though any JavaScript/React developer will be able to get a great deal of value out of this episode.

Time poor? Jump straight to the part of the video that interests you:

00:31 Introducing the topic
02:03 Isomorphic React Apps in Frontity
07:27 Debug Client & Server Side with “console.log”
11:47 Debug only Client Side with “console.log”
13:46 Using “debugger” in the Client Side
19:45 Using “debugger” in the Server Side
25:23 Debug in the Server Side with Visual Code

Here are some useful tips and links to get you up and running with debugging your Frontity project.

Debugging on the Server

• Guides to debugging node.js using VS Code:
  • Debug Node.js Apps using Visual Studio Code
  • How to set up VSCode to Debug React Apps with Chrome
• You can use console.log but the parts executed in the server will output in the terminal.
• To use the Chrome inspector:
  • start the dev server with this command:
    node --inspect -r ts-node/register/transpile-only ./node_modules/.bin/frontity dev
  • then access the server inspector in Chrome with this URL:
    chrome://inspect/#devices

Debugging on the Client

• You can also use console.log here, but the parts executed in the client side will be displayed in the browser’s console.
• Another option is to use the debugger statement in your code. This will stop the execution of the client side code at a specific point so that you can inspect the application’s state in your browser’s Developer Tools.
• For more info about the React Components used in your Frontity project you can also use React Developer Tools.

We hope you enjoy this episode of Frontity Talks and that you find it useful. If you want to see any particular Frontity related topic covered then please suggest it in the video comments or use the hashtag #AskFrontity on Twitter.

If you’ve missed any of the earlier episodes of Frontity Talks and want to catch up, you can find them all in this Youtube playlist.

Don’t forget to subscribe to our channel and tap the notification bell 🔔 to get notified when new videos are out!

Comments? Suggestions? Join the conversation here.