---
title: "Debug logging in JSS apps"
slug: "debug-logging-in-jss-apps"
abstract: "Use JSS debug logging for enhanced developer experience and production debugging"
---
# Debug logging in JSS apps

Sitecore JSS NPM packages and samples use the [debug module](https://www.npmjs.com/package/debug) for printing out debugging information.

The module exposes the `debug()` function, an augmented version of `console.log()` statements. Unlike `console.log`, you do not have to comment out or remove `debug()` calls in production code, which means you can easily enable debug logs in production when necessary using environment variables.

All Sitecore JSS logs are organized under the root namespace `sitecore-jss`. Logging is turned off by default and can be conditionally turned on by using the `DEBUG` environment variable.

> [!note]
> The debug logs only include server-side code, so there is no benefit to [enabling debug logging in the browser](https://www.npmjs.com/package/debug#browser-support).

To output all debug logs available, set the `DEBUG` environment variable to `sitecore-jss:*`. The asterisk (\*) is used as a wildcard.

```text
DEBUG=sitecore-jss:*

```

You can be selective and show only a specific category of log messages, for example, layout service logs.

```text
DEBUG=sitecore-jss:layout

```

Alternatively, you can show all but layout service logs by using the `-` prefix:

```text
DEBUG=sitecore-jss:*,-sitecore-jss:layout

```

<details>
<summary><h2>Namespaces</h2></summary>

The following table lists all the available namespaces, along with the applicable Sitecore JSS npm packages and sample applications.

| Namespace | Package(s) / sample app(s) | Description |
| --- | --- | --- |
| `sitecore-jss:http` | `sitecore-jss`, `nextjs` | HTTP request and response logging for default fetch wrappers (`GraphQLRequestClient`,  `NativeDataFetcher(JSS version >= 22.4)`, and `AxiosDataFetcher(JSS version <= 22.3)`). |
| `sitecore-jss:dictionary` | `sitecore-jss`, `nextjs`,` node-headless-ssr-experience-edge` | Trace logging for dictionary service implementations (`GraphQLDictionaryService` and `RestDictionaryService`). |
| `sitecore-jss:layout` | `sitecore-jss`, `nextjs`, `node-headless-ssr-experience-edge` | Trace logging for layout service implementations (`GraphQLLayoutService` and `RestLayoutService`). |
| `sitecore-jss:editing` | `sitecore-jss-nextjs`, `nextjs` | Trace logging for Next.js middleware for Sitecore editor integration. |
| `sitecore-jss:sitemap` | `sitecore-jss-nextjs`, `nextjs`, `nextjs-sxa` | Trace logging for Next.js GraphQL sitemap service (`GraphQLSitemapService`) and Headless SXA sitemap.xml service (`GraphQLSitemapXmlService`). |
| `sitecore-jss:robots` | `sitecore-jss-nextjs`, `nextjs`, `nextjs-sxa` | Trace logging for Next.js Headless SXA robots.txt service (`GraphQLRobotsService`). |
| `sitecore-jss:redirects` | `sitecore-jss-nextjs`, `nextjs`, `nextjs-sxa` | Trace logging for Next.js Headless SXA redirects middleware (`RedirectsMiddleware`). |
| `sitecore-jss:errorpages` | `sitecore-jss-nextjs`, `nextjs`, `nextjs-sxa` | Trace logging for Next.js Headless SXA error pages service (`GraphQLErrorPagesService`). |
| `sitecore-jss:multisite` | `sitecore-jss`, `sitecore-jss-nextjs`, `nextjs`, `nextjs-multisite` | Trace logging for GraphQL site info service (`GraphQLSiteInfoService`) and Next.js multisite middleware (`MultisiteMiddleware`). |

</details>

<details>
<summary><h2>Advanced options</h2></summary>

When running through Node.js, you can set a few additional environment variables that change the behavior of the debug logging by using the following environment variables:

| Name | Description |
| --- | --- |
| `DEBUG` | Enables/disables specific debugging namespaces. |
| `DEBUG_HIDE_DATE` | Hide date from debug output (non-TTY).<br><br>Default: `false` |
| `DEBUG_COLORS` | Whether to use colors in the debug output.<br><br>Default: `true` |
| `DEBUG_DEPTH` | Object inspection depth.<br><br>Default: 2 |
| `DEBUG_MULTILINE` | Pretty-print inspected objects on multiple lines.<br><br>Default: `false` (single line) |
| `DEBUG_SHOW_HIDDEN` | Shows hidden properties on inspected objects.<br><br>Default: `false` |

</details>