# How to Run draw.io Desktop in Development Mode with DevTools Enabled

> Learn to run draw.io Desktop in development mode with DevTools enabled. Set DRAWIO_ENV=dev to automatically open Chrome DevTools for debugging.

- Repository: [draw.io/drawio-desktop](https://github.com/jgraph/drawio-desktop)
- Tags: how-to-guide
- Published: 2026-03-05

---

**Set the environment variable `DRAWIO_ENV=dev` before launching the application to automatically open Chrome DevTools for the renderer process.**

Running **draw.io Desktop** (the standalone Electron wrapper for diagrams.net) in development mode allows you to inspect the underlying web code, debug network requests, and profile performance using familiar browser tooling. This mode is built into the `jgraph/drawio-desktop` repository and activated through a specific environment flag that modifies the main process behavior.

## Understanding the Development Mode Flag

The application detects development mode through the **`DRAWIO_ENV`** environment variable. In [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js), the code defines a boolean constant `__DEV__` by checking if `process.env.DRAWIO_ENV === 'dev'`:

```javascript
// src/main/electron.js (lines 71-75)
const __DEV__ = process.env.DRAWIO_ENV === 'dev';

```

When this evaluates to `true`, the main process enables development-specific behaviors, including the automatic opening of DevTools immediately after the main window loads.

## Launching the Application in Dev Mode

Before starting, ensure you have cloned the repository recursively to include required submodules, then install dependencies:

```bash
git clone --recursive https://github.com/jgraph/drawio-desktop.git
cd draw-io-desktop
npm ci

```

### Unix/Linux and macOS

Export the variable in your shell session before running the start command:

```bash
export DRAWIO_ENV=dev
npm start

```

### Windows PowerShell

Use the `$env:` syntax to set the variable for the current session:

```powershell
$env:DRAWIO_ENV = "dev"
npm start

```

### Windows Command Prompt

Set the variable inline with the command using the `set` keyword:

```cmd
set DRAWIO_ENV=dev && npm start

```

In all cases, the draw.io window launches with Chrome DevTools already docked or windowed, depending on your Electron configuration.

## How DevTools Are Automatically Opened

When `__DEV__` is `true`, the main process executes `mainWindow.webContents.openDevTools()` immediately after the window finishes loading. This logic is implemented in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) at lines 38-42:

```javascript
// Conditional auto-open logic
if (__DEV__) {
  mainWindow.webContents.openDevTools();
}

```

This gives you instant access to the **Elements** panel for DOM inspection, the **Console** for JavaScript errors, and the **Network** tab for monitoring diagram save/load requests without manual intervention.

## Manually Opening DevTools via IPC

If you started the app without the environment variable but need DevTools later, the main process exposes an IPC channel named `openDevTools` that the renderer can invoke at any time. The handler is defined at lines 44-49 in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js):

```javascript
// IPC handler for manual DevTools requests
ipcMain.on('openDevTools', (event) => {
  if (event.sender) {
    event.sender.openDevTools();
  }
});

```

To use this from a custom menu or debug button in the renderer process, send the message via the preloaded IPC bridge:

```javascript
// In renderer code (e.g., a custom debug menu)
const { ipcRenderer } = require('electron');

document.getElementById('debug-button').addEventListener('click', () => {
  ipcRenderer.send('openDevTools');
});

```

The **preload script** at [`src/main/electron-preload.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron-preload.js) exposes the necessary Node.js APIs to the renderer to facilitate this communication securely.

## Summary

- Set **`DRAWIO_ENV=dev`** to enable development mode in draw.io Desktop.
- The `__DEV__` constant in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) gates development-specific features.
- DevTools open automatically via `mainWindow.webContents.openDevTools()` when in dev mode.
- Use the **`openDevTools`** IPC channel to manually trigger the inspector from renderer code.
- Clone recursively with `--recursive` to ensure submodules are present before running `npm ci`.

## Frequently Asked Questions

### Can I open DevTools in a production build of draw.io Desktop?

Production builds do not automatically open DevTools, but you can usually trigger them using the standard Electron shortcut **Ctrl+Shift+I** (or **Cmd+Option+I** on macOS) unless specifically disabled. However, the `DRAWIO_ENV=dev` flag and associated IPC handlers are only guaranteed to be available when running from the source code with `npm start`.

### Does enabling development mode affect where diagrams are saved?

No, setting `DRAWIO_ENV=dev` only affects the main process window management and debugging features. It does not modify the file system adapter or change the default save locations. Your diagrams are still stored in the same user directories as in production mode.

### Why does the repository need to be cloned with `--recursive`?

The draw.io Desktop repository includes the core draw.io web application as a Git submodule. Without the `--recursive` flag, the `src/main/webapp` directory (or equivalent) remains empty, causing the application to fail when attempting to load the initial HTML. Running `git clone --recursive` ensures all nested dependencies are present before you execute `npm ci`.

### Is there a way to programmatically check if DevTools succeeded in opening?

The `openDevTools()` method returns a Promise in newer Electron versions, but the implementation in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) calls it synchronously. You can verify DevTools status by checking `mainWindow.webContents.isDevToolsOpened()` in the main process, or listen for the `devtools-opened` event on the `webContents` object if you need to trigger subsequent actions after the panel appears.