How to persist DevTools settings in Chrome profile that used for WXT DEV extension (server)?

[hotenov]

NOTE: I use Windows (Windows 10 in fact, with latest Chrome)

What I've done and what is working now (with some caveats below)

I read WXT docs:
https://wxt.dev/guide/essentials/config/browser-startup.html#persist-data
growing from
#1023 (comment)

I added this configuration in my web-ext.config.ts

import { resolve } from 'node:path';
import { defineWebExtConfig } from 'wxt';

export default defineWebExtConfig({
  // On Windows, the path must be absolute
  chromiumProfile: resolve('D:/_cache/Chrome/wxt_extensions_profile'),
  keepProfileChanges: true,
});

With this configuration each DEV run will reopen all open tabs and remembers all installed extensions in this profile. The profile directory is working (has write permissions).

BUT several caveats (problems) goes here.

Caveat 1 - WXT profile reset (does NOT persist) settings for DevTools

I want to save Console ➜ Timestamps setting in Chrome DevTools (at least) between DEV server restarts
(ideally need to persist all DevTools settings, including opening DevTool in a separate window).

but each npm run dev I have to restore all DevTools settings manually

Is there a way to force Chrome profile to save changes in DevTools too? Maybe a CLI option for Chrome?

Caveat 2 - Should WXT close Chrome instance normally (as user closes) by stopping DEV server via CTRL + C in console

Currently (2026-08-05), in order to stop DEV server we need press CTRL + C (entering q + enter is NOT implemented)

Is it possible to consider CTRL + C as "normal exit" (because it's the single now) and close Chrome window (shut down) as user does by clicking Close (x) button on Windows.
Because if we stop DEV server when Chrome (with WXT profile) is open we see Restore button each time when we forgot to close Chrome before CTRL + C

Or CTRL + C is common to interpret as "interrupt execution" and current behavior is OK?, because we really interrupt DEV server and Chrome was not close properly (i.e. by user).

In that case, maybe it's worth to add q + enter combination for DEV server prompt (console)?
to point out WXT that "I understand that Chrome will be closed normally and I really want to quit from DEV server"

[hotenov]

Okey, I've read WXT docs more carefully and noticed API reference to WebExtConfig
https://wxt.dev/api/reference/wxt/interfaces/WebExtConfig.html#chromiumpref

I discovered that there is default settings for chromiumPref option (in fact only one setting is set, extensions is not set by default, at least in chromiumPref option, see screenshot below).

These default settings overrides (ignores) Chrome's settings saved in file
<chrome_profile_directory>/Default/Preferences
That's why we have to set additional DevTools settings each time when DEV browser is running.

I googled and reviewed my regular Chrome profile Preferences file and I managed to workaround this problem, by adding other devtools settings in chromiumPref option in web-ext.config.tsconfig.

The following config is the minimum of Chrome DevTools settings that I set for development and debugging:

PAY ATTENTION:

• Double quotes are mandatory for string values;
• True as string for some preferences options;
• extensions is not included (because there is no such preference in my Chrome profile, and is not logged in wxt --debug output)
• DevTools will be undocked (in separate window) with this snippet. Comment out line with currentDockState option if you don't needed.
• Both (Console and Network) logs are preserved (continues after page reload)

// web-ext.config.ts
import { resolve } from 'node:path';
import { defineWebExtConfig } from 'wxt';

export default defineWebExtConfig({
  chromiumPref: {
    devtools: {
      preferences: {
        currentDockState: '"undocked"', // matter of taste, you can comment it.
        'last-dock-state': '"right"',
        'network-log.preserve-log': 'true', // ! true as string here.
      },
      synced_preferences_sync_disabled: {
        'console-timestamps-enabled': true,
        'preserve-console-log': true,
        skipContentScripts: false, // <- WXT default (mentioned in docs)
      },
    },
    // extensions: { // NO need in fact?
    //   ui: {
    //     developer_mode: true,
    //   },
    // }
  },
  // On Windows, the path must be absolute
  chromiumProfile: resolve('D:/_cache/Chrome/wxt_extensions_profile'),
  keepProfileChanges: true,
});

[hotenov]

@aklinker1 Hi! Can you consider to change behavior for adding chromiumPref default options to avoid setting all other user needed DevTools settings in web-ext.config.tsconfig?

See details in my previous comment and shortly what I'm talking about:

1. Need to merge WXT default setting with existing settings (preferences) in Chrome profile if they exist (especially if keepProfileChanges: true,). Because currently settings from WXT config or from source code have the preeminent affect ignoring existing preferences stored in Preferences file in Chrome profile folder.

2. Remove extensions options from chromiumPref example (in source code), because:
   a) It seems "developer mode" is set not here (no such option in Preferences file)
   b) it's not logged as part of chromiumPref object in in wxt --debug output
   c) comma (,) is missing in example (maybe the whole 'extensions' mystery is copy-paste issue 😃 )
   For a), b) и с) see screenshots below.

3. Look at my "Caveat 2" in the discussion description. Can we change this or there is no technical possibility to close Chrome 'normally' when we shut down DEV server?

[aklinker1]

1. Need to merge WXT default setting with existing settings (preferences) in Chrome profile if they exist (especially if keepProfileChanges: true,). Because currently settings from WXT config or from source code have the preeminent affect ignoring existing preferences stored in Preferences file in Chrome profile folder.

Hmm, I thought I already do that. See

wxt/packages/wxt/src/core/runners/web-ext.ts

Lines 27 to 73 in 9271f2c

	const userConfig = {
	browserConsole: wxtUserConfig?.openConsole,
	devtools: wxtUserConfig?.openDevtools,
	startUrl: wxtUserConfig?.startUrls,
	keepProfileChanges: wxtUserConfig?.keepProfileChanges,
	chromiumPort: wxtUserConfig?.chromiumPort,
	...(wxt.config.browser === 'firefox'
	? {
	firefox: wxtUserConfig?.binaries?.firefox,
	firefoxProfile: wxtUserConfig?.firefoxProfile,
	pref: wxtUserConfig?.firefoxPref,
	args: wxtUserConfig?.firefoxArgs,
	}
	: {
	chromiumBinary: wxtUserConfig?.binaries?.[wxt.config.browser],
	chromiumProfile: wxtUserConfig?.chromiumProfile,
	chromiumPref: defu(
	wxtUserConfig?.chromiumPref,
	DEFAULT_CHROMIUM_PREFS,
	),
	args: [
	'--unsafely-disable-devtools-self-xss-warnings',
	...(wxtUserConfig?.chromiumArgs ?? []),
	],
	}),
	};
	const finalConfig = {
	...userConfig,
	target:
	wxt.config.browser === 'firefox' ? 'firefox-desktop' : 'chromium',
	sourceDir: wxt.config.outDir,
	// Don't add a "Reload Manager" extension alongside dev extension, WXT
	// already handles reloads internally.
	noReloadManagerExtension: true,
	// WXT handles reloads, so disable auto-reload behaviors in web-ext
	noReload: true,
	noInput: true,
	};
	const options = {
	// Don't call `process.exit(0)` after starting web-ext
	shouldExitProgram: false,
	};
	wxt.logger.debug('web-ext config:', finalConfig);
	wxt.logger.debug('web-ext options:', options);
	runner = await webExt.cmd.run(finalConfig, options);

Do you need to mention this in web-ext?

2. Remove extensions options from chromiumPref example (in source code), because:
   a) It seems "developer mode" is set not here (no such option in Preferences file)
   b) it's not logged as part of chromiumPref object in in wxt --debug output
   c) comma (,) is missing in example (maybe the whole 'extensions' mystery is copy-paste issue 😃 )
   For a), b) и с) see screenshots below.

A newer version of web-ext implemented enabling dev mode by default, that's why you don't need to set anything in your webExt config. Chrome constantly changes were options are stored, and the docs are out of date.

I can remove that example from the JSDoc, since it's wrong and not necessary anymore.

Edit: Done in aeb16e7

3. Look at my "Caveat 2" in the discussion description. Can we change this or there is no technical possibility to close Chrome 'normally' when we shut down DEV server?

On Mac and Linux, the chrome process is spawned as a child process, meaning when the parent process is killed (with ctrl+C), the child process, Chrome, is closed as well. So what you are asking for is the intended behavior.

If this doesn't happen on Windows, I need someone with a windows machine to fix and open a PR. If you can figure it out, I'm down to merge your fix.

[hotenov]

@aklinker1 as always thanks for quick reply!

Hmm, I thought I already do that. See

I see that you merge wxtUserConfig?.chromiumPref with DEFAULT_CHROMIUM_PREFS in this lines:

chromiumPref: defu( 
           wxtUserConfig?.chromiumPref, 
           DEFAULT_CHROMIUM_PREFS, 
         ), 

but I don't see that wxtUserConfig is read from file <CHROME_PROFILE_FOLDER>/Default/Preferences and merged with user config according to this line:

wxt/packages/wxt/src/core/runners/web-ext.ts

Line 26 in 9271f2c

const wxtUserConfig = wxt.config.webExt.config;

As I understand wxtUserConfig now is only what user specifies in defineWebExtConfig() in web-ext.config.ts.
It does NOT include (consider) preferences that user might change via Chrome (GUI) which are stored in file <CHROME_PROFILE_FOLDER>/Default/Preferences and it looks like regular minified JSON without file extension.

Maybe, I wrong (I didn't look further / upper in source code, where file reading is actually heppend).

Look at screenshot (instead of thousands words 😃):

To achieve this scenario:

1. User runs DEV server first time - only WebExt config are applied for DevTools
2. User open DevTools in GUI and changes devtools preferences (also via GUI) - changes are saved in Preferences file
3. User runs DEV next time - changes from Preferences file are merged with WebExt config and applied for DevTools
   Actual result: no step 3) - we return to 1) after 2)

I can remove that example from the JSDoc, since it's wrong and not necessary anymore.
Edit: Done in aeb16e7

Yes, removing is enough, but maybe remove only extensions option, and leave devtools because it has defaults and maybe some people want to know what defaults are (without searching in source code).

If this doesn't happen on Windows, I need someone with a windows machine to fix and open a PR. If you can figure it out, I'm down to merge your fix.

Oh, if this is only on Windows - let it be =) It's not a problem, more UX improvement (and maybe only for me 😃) So, it's not worth it. To click Restore button or close Chrome before stopping DEV server is much easier =)