Debuggers are useful for troubleshooting issues in your application code. While it's already possible to debug your frontend code using the browser's developer tools, debugging server code can be challenging in non-Node.js environments. This guide teaches you how to attach a debugger to an Oxygen worker that's running locally.

## Step 1: Start your development server in debug mode

To get started with server code debugging, you need to start your development server in debug mode. Run the following command in your terminal:

<p>
<div class="react-code-block" data-preset="terminal">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="sh">
RAW_MD_CONTENTnpx shopify hydrogen dev --worker --debug
END_RAW_MD_CONTENT</script>

</div>
</p>


The `--debug` flag enables a port to listen for debugger connections. By default, the port is set to `9229`. You can change this port by passing a `--inspector-port` flag followed by the port number. These flags are also available for the `preview` command.

> Note:
> The `--worker` flag is required to start the development server in a mode that mimics an Oxygen worker.

## Step 2: Attach a debugger

You can attach a debugger to your development server using an IDE or browser. Two common options are [Visual Studio Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) and [Chrome DevTools](https://developer.chrome.com/docs/devtools/).

### Visual Studio Code

To attach a debugger from Visual Studio Code, create a new [debugger configuration](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) in `.vscode/launch.json`. Add the following JSON content to connect to your local worker:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value=".vscode/launch.json"></script>

<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Hydrogen",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "cwd": "/",
      "resolveSourceMapLocations": null,
      "attachExistingChildren": false,
      "autoAttachChildProcesses": false,
      "restart": true
    }
  ]
}
END_RAW_MD_CONTENT</script>

</div>
</p>


Update the value in the `port` field if you are using a different port.

After you've created the configuration file, click **Start Debugging** in the Visual Studio Code sidebar to connect the debugger to your Oxygen worker.

After the debugger is attached, you can set [breakpoints](https://code.visualstudio.com/docs/editor/debugging#_breakpoints) in the editor to stop the execution of your code.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/custom-storefronts/hydrogen/vscode-debugging-44aa775c4fa3b9e3c1cd8eb5a52e0e0435597fcbd6142413f1ae28c032474742.png" class="lazyload" alt="Visual Studio Code debugging" width="100%" height="1780"></figure>

### Chrome DevTools

The Hydrogen development server provides an enhanced Chrome DevTools experience for debugging server code through your browser. To use it, open the link shown in the terminal after starting your development server in debug mode. The default link is `http://localhost:9229`.

You can then set breakpoints in server code to stop the execution of your app in every request, inspect variable values, and step through the code. DevTools also provides a console for you to run arbitrary code in the context of your app.

> Tip:
> You can also open this link in other browsers. However, certain features might not be available. Google Chrome or a Chromium-based browser is recommended.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/custom-storefronts/hydrogen/hydrogen-devtools-44b5ba8c0ad29b38b68f3c309f4396ed7cae411f0be635954b48b63206f02299.png" class="lazyload" alt="Hydrogen DevTools" width="100%" height="1354"></figure>