Oct 3, 2022
How to debug a Remix App — Remix Series
Only the console log is not sufficient
Remix is different from a CRA (React) because Remix has a server side beyond the client side.
To debug a Remix application, you can’t use only the console log. In this article I’ll explain why.
Hi Devs, I’m Daniele Carta and I’m a Frontend Developer.
Client side
For the first thing I want to show you how to debug the client side. Image to have a component with a useEffect and a useLoaderData.
In the first case, we use console log to debug articles in the ArticlesPage component.
In this case is very simple with a simple console log. But, let’s image that the console log return “undefined”.
Probably, the problem will be into the “loader function” or into the getArticles function.
Keep in mind that in the loader function you CAN’T use the console log because this function is invoked on server side.
Server side
If we can’t use the console log what do we do? It’s not complicated, let’s see togheter.
The first things is create a file in this path app/services/utils/debug.ts with a simple function like this:
Now with this function we can test the server side also. In the previous article we had a loader function with the getArticles service.
Look at the following screen, in the row 7 we have the debug function and the break point setted in VS Code.
Now if you start the debug of VS Code with Run -> Run Debug of F5, will be start the debugger and you will see the value of articles in the sidebar (like the screenshot).
This is the best method to debug the server side (loader function).
Conclusion
We are at the end of the article. I hope this article is useful for you and for your debug.
Keep in mind there is a little difference to debug the client side and the server side.
Thanks for reading the article, I hope it was useful for you!
Feel free to follow me on:
Coming soon
- Meta tags like a PRO — Remix Series
- How to debug a Remix App — Remix Series
- How to fetch data — Remix Series (coming soon)
- Routing like a PRO — Remix Series (coming soon)
