Logo Learn By Doing Light Mode
Debug NextJS "Client" and "Server" components with Chrome Dev Tools
Debug NextJS "Client" and "Server" components with Chrome Dev Tools

Learn how to debug Client and Server Components by using Chrome Dev Tools and Inspect

 
techs
v.18
v.14+
 

# Video Preview

Watch the video (no audio) to see a brief preview of the entire procedure to debug React Server Components in Next v.14/15. Read the article below to get whole explanation to configure and debug both, client and server components, with Chrome Dev Tools .
This video does not have audio

# Introduction

If you use the latest versions of Next (14 or 15) you will know that you can use Client Components, which work roughly like the "normal" React components, which we have been using for years now, and the Server Components which are instead rendered on the server.
While debugging a client component is relatively "simple", debugging a component rendered on the server is not so easy and intuitive.
When something doesn't work as it should, the first way I usually try to find the problem is the console.log, placed where I think there are problems.
However, things don't always go right and in those cases we need to debug our application by using better and powerful tools. And our best friend is Chrome Dev Tools .

# Debug Client Components

 
It's a fact...
Console.log is always our best friend and the first tool we use when there is a problem
 

SNIPPET

For example, we can simply add a console.log in a React / Next component that is rendered on the client side to know the value of a state at any time (as shown below):
TypeScript
React

RESULT

And the result will be a simple log of some text in the browser:
Demo React Client Component

# Debug with Chrome DevTools

However, when things get complicated, the console.log may not be enough and the Chrome Dev Tools can help us: we can add breakpoints, explore the value of our variables, check if a function has been invoked or not, analyze performance and much more.
So, let's now see how to use the DevTools Source Tab to add a breakpoint:
  • Open Chrome Dev Tools (CMD OPTION + C on Mac or F12 on Windows)
  • select the Source Tab
  • and "Open File" clicking the Button (see image below) or pressing CMD + P, as shown below:
Chrome Dev Tools: Source
Now you can search files inside your project. In the screenshot below I'm opening the file page.tsx located in the about folder:
Chrome Dev Tools: Open File
TIP
You may think: how the browser can recognize the original source code since it receives the compiled version? Thanks to source maps that are enabled by default by the NextJS CLI.
NOTE
How to debug using ChromeDevTools is out of scope. You can find a lot of articles and videos about this topic
Now you can add breakpoints and debug your Client components:
Chrome Dev Tools: debug
TIP
Another way to stop the execution of your code and automatically open Chrome Dev Tools is by adding a debugger; statement to the place in the code you need to debug

# Debug React Server Component

However, things get complicated and less intuitive when we want to debug components rendered on the server. In the following example, a React Server Component is loading data via fetch and renders a simple list of my articles on Dev.to .
TypeScript
React
background handwritten
Read the full article!
Sign Up
It's completely free!
Don’t have an account yet?
Sign Up!

Did you like this content?

Your feedback is very important to us!
19
May
2024