# 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

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):

my-client-component.tsx

RESULT

And the result will be a simple log of some text in the browser:

# 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:

Now you can search files inside your project. In the screenshot below I'm opening the file page.tsx located in the about folder:

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:

# 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 .

my-server-component.tsx