feat: add `WebviewWindow/Webview::devtools`

closes #10849

.changes/config-devtools.md

@@ -0,0 +1,8 @@
+---
+"tauri": "patch:feat"
+"tauri-utils": "patch:feat"
+"@tauri-apps/api": "patch:feat"
+---
+
+Add `app > windows > devtools` config option and when creating the webview from JS, to enable or disable devtools for a specific webview.
+

.changes/webview-builder-devtools.md

@@ -0,0 +1,8 @@
+---
+"tauri": "patch:feat"
+"tauri-runtime": "patch:feat"
+"tauri-runtime-wry": "patch:feat"
+---
+
+Add `WebviewWindowBuilder::devtools` and `WebviewBuilder::devtools` to enable or disable devtools for a specific webview.
+

crates/tauri-cli/config.schema.json

@@ -486,6 +486,13 @@
           "description": "Whether browser extensions can be installed for the webview process\n\n ## Platform-specific:\n\n - **Windows**: Enables the WebView2 environment's [`AreBrowserExtensionsEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2environmentoptions?view=webview2-winrt-1.0.2739.15#arebrowserextensionsenabled)\n - **MacOS / Linux / iOS / Android** - Unsupported.",
           "default": false,
           "type": "boolean"
+        },
+        "devtools": {
+          "description": "Enable web inspector which is usually called browser devtools.\n\n It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.\n\n ## Platform-specific\n\n - macOS: This will call private functions on **macOS**.\n - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.\n - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.",
+          "type": [
+            "boolean",
+            "null"
+          ]
         }
       },
       "additionalProperties": false

crates/tauri-runtime-wry/src/lib.rs

@@ -4225,7 +4225,7 @@ fn create_webview<T: UserEvent>(
 
   #[cfg(any(debug_assertions, feature = "devtools"))]
   {
-    webview_builder = webview_builder.with_devtools(true);
+    webview_builder = webview_builder.with_devtools(webview_attributes.devtools.unwrap_or(true));
   }
 
   #[cfg(target_os = "android")]

crates/tauri-runtime/src/webview.rs

@@ -209,6 +209,7 @@ pub struct WebviewAttributes {
   pub proxy_url: Option<Url>,
   pub zoom_hotkeys_enabled: bool,
   pub browser_extensions_enabled: bool,
+  pub devtools: Option<bool>,
 }
 
 impl From<&WindowConfig> for WebviewAttributes {
@@ -237,6 +238,7 @@ impl From<&WindowConfig> for WebviewAttributes {
     }
     builder = builder.zoom_hotkeys_enabled(config.zoom_hotkeys_enabled);
     builder = builder.browser_extensions_enabled(config.browser_extensions_enabled);
+    builder = builder.devtools(config.devtools);
     builder
   }
 }
@@ -261,6 +263,7 @@ impl WebviewAttributes {
       proxy_url: None,
       zoom_hotkeys_enabled: false,
       browser_extensions_enabled: false,
+      devtools: None,
     }
   }
 
@@ -378,6 +381,20 @@ impl WebviewAttributes {
     self.browser_extensions_enabled = enabled;
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not.
+  ///
+  /// ## Platform-specific
+  ///
+  /// - macOS: This will call private functions on **macOS**. It is enabled in **debug** builds,
+  /// but requires `devtools` feature flag to actually enable it in **release** builds.
+  /// - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.
+  /// - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.
+  #[must_use]
+  pub fn devtools(mut self, enabled: Option<bool>) -> Self {
+    self.devtools = enabled;
+    self
+  }
 }
 
 /// IPC handler.

crates/tauri-schema-generator/schemas/config.schema.json

@@ -486,6 +486,13 @@
           "description": "Whether browser extensions can be installed for the webview process\n\n ## Platform-specific:\n\n - **Windows**: Enables the WebView2 environment's [`AreBrowserExtensionsEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2environmentoptions?view=webview2-winrt-1.0.2739.15#arebrowserextensionsenabled)\n - **MacOS / Linux / iOS / Android** - Unsupported.",
           "default": false,
           "type": "boolean"
+        },
+        "devtools": {
+          "description": "Enable web inspector which is usually called browser devtools.\n\n It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.\n\n ## Platform-specific\n\n - macOS: This will call private functions on **macOS**.\n - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.\n - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.",
+          "type": [
+            "boolean",
+            "null"
+          ]
         }
       },
       "additionalProperties": false

crates/tauri-utils/src/config.rs

@@ -1486,6 +1486,16 @@ pub struct WindowConfig {
   /// - **MacOS / Linux / iOS / Android** - Unsupported.
   #[serde(default)]
   pub browser_extensions_enabled: bool,
+  /// Enable web inspector which is usually called browser devtools.
+  ///
+  /// It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.
+  ///
+  /// ## Platform-specific
+  ///
+  /// - macOS: This will call private functions on **macOS**.
+  /// - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.
+  /// - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.
+  pub devtools: Option<bool>,
 }
 
 impl Default for WindowConfig {
@@ -1534,6 +1544,7 @@ impl Default for WindowConfig {
       proxy_url: None,
       zoom_hotkeys_enabled: false,
       browser_extensions_enabled: false,
+      devtools: None,
     }
   }
 }
@@ -2505,6 +2516,7 @@ mod build {
       let parent = opt_str_lit(self.parent.as_ref());
       let zoom_hotkeys_enabled = self.zoom_hotkeys_enabled;
       let browser_extensions_enabled = self.browser_extensions_enabled;
+      let devtools = self.devtools;
 
       literal_struct!(
         tokens,
@@ -2551,7 +2563,8 @@ mod build {
         incognito,
         parent,
         zoom_hotkeys_enabled,
-        browser_extensions_enabled
+        browser_extensions_enabled,
+        devtools
       );
     }
   }

crates/tauri/src/webview/mod.rs

@@ -787,6 +787,21 @@ fn main() {
     self.webview_attributes.browser_extensions_enabled = enabled;
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not.
+  ///
+  /// It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.
+  ///
+  /// ## Platform-specific
+  ///
+  /// - macOS: This will call private functions on **macOS**
+  /// - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.
+  /// - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.
+  #[must_use]
+  pub fn devtools(mut self, enabled: bool) -> Self {
+    self.webview_attributes.devtools.replace(enabled);
+    self
+  }
 }
 
 /// Webview.

crates/tauri/src/webview/webview_window.rs

@@ -896,6 +896,21 @@ impl<'a, R: Runtime, M: Manager<R>> WebviewWindowBuilder<'a, R, M> {
     self.webview_builder = self.webview_builder.browser_extensions_enabled(enabled);
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not.
+  ///
+  /// It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.
+  ///
+  /// ## Platform-specific
+  ///
+  /// - macOS: This will call private functions on **macOS**.
+  /// - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.
+  /// - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.
+  #[must_use]
+  pub fn devtools(mut self, enabled: bool) -> Self {
+    self.webview_builder = self.webview_builder.devtools(enabled);
+    self
+  }
 }
 
 /// A type that wraps a [`Window`] together with a [`Webview`].

packages/api/src/webview.ts

@@ -728,6 +728,20 @@ interface WebviewOptions {
    * - **Android / iOS**: Unsupported.
    */
   zoomHotkeysEnabled?: boolean
+  /**
+   * Whether web inspector, which is usually called browser devtools, is enabled or not.
+   *
+   * It is enabled in **debug** builds, but requires `devtools` feature flag to actually enable it in **release** builds.
+   *
+   * #### Platform-specific
+   *
+   * - macOS: This will call private functions on **macOS**.
+   * - Android: Open `chrome://inspect/#devices` in Chrome to get the devtools window. Wry's `WebView` devtools API isn't supported on Android.
+   * - iOS: Open Safari > Develop > [Your Device Name] > [Your WebView] to get the devtools window.
+   *
+   * @since 2.1.0
+   */
+  devtools?: boolean
 }
 
 export { Webview, getCurrentWebview, getAllWebviews }

packages/api/src/window.ts

@@ -2291,6 +2291,17 @@ interface WindowOptions {
    * @since 2.0.0
    */
   visibleOnAllWorkspaces?: boolean
+  /**
+   * Window effects.
+   *
+   * Requires the window to be transparent.
+   *
+   * #### Platform-specific:
+   *
+   * - **Windows**: If using decorations or shadows, you may want to try this workaround <https://github.com/tauri-apps/tao/issues/72#issuecomment-975607891>
+   * - **Linux**: Unsupported
+   */
+  windowEffects?: Effects
 }
 
 function mapMonitor(m: Monitor | null): Monitor | null {