Debugging Your Tool

Power Platform ToolBox tools run in two hosts — the Desktop App and the VS Code Extension. The build setup below is shared by both; once your tool is building with source maps, follow the guide for the host you're debugging in.

Overview

Debugging a tool has two parts:

1. Build – compile your tool in development mode so source maps are emitted alongside the output (shared across hosts, covered below)
2. Load & Inspect – host-specific: how you load your local tool and open DevTools differs between the Desktop App and the VS Code Extension

Step 1: Enable Source Maps

Source maps allow DevTools to display your original TypeScript (or un-bundled JavaScript) source files instead of the compiled output, making it possible to set meaningful breakpoints and read readable stack traces.

Vite projects (generated by yo pptb)

The generator adds a development mode configuration to vite.config.ts that enables source maps automatically:

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => ({
  build: {
    sourcemap: mode === 'development', // emitted only in development builds
  },
}))

No further changes are required if you used the generator. Verify this block is present before continuing.

Webpack projects

Add devtool to your webpack config:

// webpack.config.js
module.exports = (env, argv) => ({
  devtool: argv.mode === 'development' ? 'source-map' : false,
  // ...rest of your config
})

Manual / no-bundler projects

If you are not using a bundler, your source files are already loaded directly — no additional configuration is required.

Step 2: Start Dev-Watch Mode

The dev-watch npm script builds your tool in development mode and then watches for file changes, rebuilding automatically whenever you save:

npm run dev-watch

Leave this terminal open while you work. Every time you save a source file you will see a new build complete message:

✓ built in 312ms
watching for file changes...

Choose Your Host