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

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, the code defines a boolean constant __DEV__ by checking if process.env.DRAWIO_ENV === 'dev':

// 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:

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:

export DRAWIO_ENV=dev
npm start

Windows PowerShell

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

$env:DRAWIO_ENV = "dev"
npm start

Windows Command Prompt

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

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 at lines 38-42:

// 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:

// 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:

// 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 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}