Debugging using Jetbrains / Webstorm

[Harm-Nullix]

Based on a previous discussion regarding VS Code (#2057), I thought it would be nice to have a page for Jetbrains as well.

Because I do not really know what made it work, I will paste all relevant files in here.
See to your liking what you need / want to change.

[Harm-Nullix]

In the root of the nitro project:
The first config is nodejs based.
The second is npm based so you can run a script from your package.json (e.g. nitropack dev).

<!-- nitro.run.xml -->
<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="nitro:nodejs:dev" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="node_modules/.bin/nitropack" working-dir="$PROJECT_DIR$">
    <method v="2" />
  </configuration>

    <configuration default="false" name="nitro:npm:dev" type="js.build_tools.npm" nameIsGenerated="true">
        <package-json value="$PROJECT_DIR$/package.json" />
        <command value="run" />
        <scripts>
            <script value="dev" />
        </scripts>
        <node-interpreter value="project" />
        <envs />
        <method v="2" />
    </configuration>
</component>

/* nitro.config.ts */
import terser from '@rollup/plugin-terser'
import { SourceMapConsumer } from 'source-map'
import { readFile } from 'fs/promises'

const isDev = process.env.NODE_ENV === 'development'
const isDebug = process.env.DEBUG === 'true'
const isObscuredBuild = !isDev && !isDebug
const outputDir = isDev ? '.nitro/dev' : 'deploy/dist'
const devErrorHandler = async function (error, event) {
  // This will not work when implemented in nitro itself
  const sourceMap = await readFile(`${outputDir}/index.mjs.map`, 'utf8')

  const stackTraceLine = error.stack as string
  const stackLineMatch = stackTraceLine.match(/at (.*):(\d+):(\d+)/)
  // @ts-ignore
  const map = await new SourceMapConsumer(sourceMap)

  if (stackLineMatch) {
    const [, filePath, line, column] = stackLineMatch
    const originalPosition = map.originalPositionFor({
      line: parseInt(line),
      column: parseInt(column),
    })

    const originalErrorPosition = `${originalPosition.source}:${originalPosition.line}:${originalPosition.column}`

    console.log(`${error.message}: ${originalErrorPosition}`)
    event.res.end(`${error.message}: ${originalErrorPosition}`)
  }
}
export default defineNitroConfig({
  srcDir: './src',
  devErrorHandler: devErrorHandler,
  dev: isDev,
  debug: isDebug,
  noPublicDir: true,
  preset: 'node-server',
  node: true,
  sourceMap: !isObscuredBuild,
  minify: isObscuredBuild,
  inlineDynamicImports: isObscuredBuild,
  output: { dir: outputDir, serverDir: '' },
  rollupConfig: {
    treeshake: isObscuredBuild,
    plugins: [
      ...(isObscuredBuild
        ? [
          terser({
            mangle: {
              keep_classnames: false,
              keep_fnames: false,
              toplevel: true,
            },
            compress: {
              passes: 3,
              keep_fargs: false,
              keep_classnames: false,
              keep_fnames: false,
              toplevel: true,
            },
          }),
        ]
        : []),
    ],
  },
})

/* tsconfig.json */
{
  "extends": "./.nitro/types/tsconfig.json"
}

# .env
DEBUG=true

You can click the debug icon in the top of your toolbar (I have atom icons so the icons may differ a bit)

And you can see the breakpoint:

It would be great to add "how to debug" into Getting Started