Repository: tauri-apps/tauri (language: rust)

Issue:
[feat] Enable devtools only for certain webviews
### Describe the problem

Currently the `devtools` features enables the webview devtools for all webviews.

https://github.com/tauri-apps/tauri/blob/5ec74456b9ae45eaa63e225856de1b7eb83abe6f/crates/tauri-runtime-wry/src/lib.rs#L4137-L4140

I want to enable it for only a certain webview window. My use case is, I have an app that has a canvas and a manager. I want to have devtools in the canvas window in the release build so that users can inspect the elements, but not for the manager window.

### Describe the solution you'd like

I noticed that `WebviewBuilder` in `wry` has the [`with_devtools`](https://docs.rs/wry/latest/wry/struct.WebViewBuilder.html#method.with_devtools) method. Is it possible to have the same on `WebviewWindowBuilder` in `tauri`?

### Alternatives considered

_No response_

### Additional context

_No response_


Discussion / hints:

Fix patch:
diff --git a/.changes/config-devtools.md b/.changes/config-devtools.md
new file mode 100644
index 000000000000..a75ecfbc1f14
--- /dev/null
+++ b/.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.
+
diff --git a/.changes/webview-builder-devtools.md b/.changes/webview-builder-devtools.md
new file mode 100644
index 000000000000..5db1761729b0
--- /dev/null
+++ b/.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.
+
diff --git a/crates/tauri-cli/config.schema.json b/crates/tauri-cli/config.schema.json
index 9efeba50db44..d6742021f9d0 100644
--- a/crates/tauri-cli/config.schema.json
+++ b/crates/tauri-cli/config.schema.json
@@ -498,6 +498,13 @@
           "description": "Sets whether the custom protocols should use `https://<scheme>.localhost` instead of the default `http://<scheme>.localhost` on Windows and Android. Defaults to `false`.\n\n ## Note\n\n Using a `https` scheme will NOT allow mixed content when trying to fetch `http` endpoints and therefore will not match the behavior of the `<scheme>://localhost` protocols used on macOS and Linux.\n\n ## Warning\n\n Changing this value between releases will change the IndexedDB, cookies and localstorage location and your app will not be able to access the old data.",
           "default": false,
           "type": "boolean"
+        },
+        "devtools": {
+          "description": "Enable web inspector which is usually called browser devtools. Enabled by default.\n\n This API works in **debug** builds, but requires `devtools` feature flag to 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
diff --git a/crates/tauri-runtime-wry/src/lib.rs b/crates/tauri-runtime-wry/src/lib.rs
index 65e77ec95670..cde760ba7587 100644
--- a/crates/tauri-runtime-wry/src/lib.rs
+++ b/crates/tauri-runtime-wry/src/lib.rs
@@ -4274,7 +4274,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")]
diff --git a/crates/tauri-runtime/src/webview.rs b/crates/tauri-runtime/src/webview.rs
index 149983808895..203d97b9422e 100644
--- a/crates/tauri-runtime/src/webview.rs
+++ b/crates/tauri-runtime/src/webview.rs
@@ -211,6 +211,7 @@ pub struct WebviewAttributes {
   pub zoom_hotkeys_enabled: bool,
   pub browser_extensions_enabled: bool,
   pub use_https_scheme: bool,
+  pub devtools: Option<bool>,
 }
 
 impl From<&WindowConfig> for WebviewAttributes {
@@ -220,7 +221,8 @@ impl From<&WindowConfig> for WebviewAttributes {
       .focused(config.focus)
       .zoom_hotkeys_enabled(config.zoom_hotkeys_enabled)
       .use_https_scheme(config.use_https_scheme)
-      .browser_extensions_enabled(config.browser_extensions_enabled);
+      .browser_extensions_enabled(config.browser_extensions_enabled)
+      .devtools(config.devtools);
     #[cfg(any(not(target_os = "macos"), feature = "macos-private-api"))]
     {
       builder = builder.transparent(config.transparent);
@@ -267,6 +269,7 @@ impl WebviewAttributes {
       zoom_hotkeys_enabled: false,
       browser_extensions_enabled: false,
       use_https_scheme: false,
+      devtools: None,
     }
   }
 
@@ -406,6 +409,21 @@ impl WebviewAttributes {
     self.use_https_scheme = enabled;
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not. Enabled by default.
+  ///
+  /// This API works in **debug** builds, but requires `devtools` feature flag to 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: Option<bool>) -> Self {
+    self.devtools = enabled;
+    self
+  }
 }
 
 /// IPC handler.
diff --git a/crates/tauri-schema-generator/schemas/config.schema.json b/crates/tauri-schema-generator/schemas/config.schema.json
index 9efeba50db44..d6742021f9d0 100644
--- a/crates/tauri-schema-generator/schemas/config.schema.json
+++ b/crates/tauri-schema-generator/schemas/config.schema.json
@@ -498,6 +498,13 @@
           "description": "Sets whether the custom protocols should use `https://<scheme>.localhost` instead of the default `http://<scheme>.localhost` on Windows and Android. Defaults to `false`.\n\n ## Note\n\n Using a `https` scheme will NOT allow mixed content when trying to fetch `http` endpoints and therefore will not match the behavior of the `<scheme>://localhost` protocols used on macOS and Linux.\n\n ## Warning\n\n Changing this value between releases will change the IndexedDB, cookies and localstorage location and your app will not be able to access the old data.",
           "default": false,
           "type": "boolean"
+        },
+        "devtools": {
+          "description": "Enable web inspector which is usually called browser devtools. Enabled by default.\n\n This API works in **debug** builds, but requires `devtools` feature flag to 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
diff --git a/crates/tauri-utils/src/config.rs b/crates/tauri-utils/src/config.rs
index 1ff12495c022..390aaea90af2 100644
--- a/crates/tauri-utils/src/config.rs
+++ b/crates/tauri-utils/src/config.rs
@@ -1533,6 +1533,16 @@ pub struct WindowConfig {
   /// Changing this value between releases will change the IndexedDB, cookies and localstorage location and your app will not be able to access the old data.
   #[serde(default, alias = "use-https-scheme")]
   pub use_https_scheme: bool,
+  /// Enable web inspector which is usually called browser devtools. Enabled by default.
+  ///
+  /// This API works in **debug** builds, but requires `devtools` feature flag to 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 {
@@ -1583,6 +1593,7 @@ impl Default for WindowConfig {
       zoom_hotkeys_enabled: false,
       browser_extensions_enabled: false,
       use_https_scheme: false,
+      devtools: None,
     }
   }
 }
@@ -2556,6 +2567,7 @@ mod build {
       let zoom_hotkeys_enabled = self.zoom_hotkeys_enabled;
       let browser_extensions_enabled = self.browser_extensions_enabled;
       let use_https_scheme = self.use_https_scheme;
+      let devtools = opt_lit(self.devtools.as_ref());
 
       literal_struct!(
         tokens,
@@ -2604,7 +2616,8 @@ mod build {
         parent,
         zoom_hotkeys_enabled,
         browser_extensions_enabled,
-        use_https_scheme
+        use_https_scheme,
+        devtools
       );
     }
   }
diff --git a/crates/tauri/src/webview/mod.rs b/crates/tauri/src/webview/mod.rs
index 199d5a8f90d8..bf3f1f3be4b5 100644
--- a/crates/tauri/src/webview/mod.rs
+++ b/crates/tauri/src/webview/mod.rs
@@ -815,6 +815,21 @@ fn main() {
     self.webview_attributes.use_https_scheme = enabled;
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not. Enabled by default.
+  ///
+  /// This API works in **debug** builds, but requires `devtools` feature flag to 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.
diff --git a/crates/tauri/src/webview/webview_window.rs b/crates/tauri/src/webview/webview_window.rs
index 9909830eaa73..32799a665d8b 100644
--- a/crates/tauri/src/webview/webview_window.rs
+++ b/crates/tauri/src/webview/webview_window.rs
@@ -920,6 +920,21 @@ impl<'a, R: Runtime, M: Manager<R>> WebviewWindowBuilder<'a, R, M> {
     self.webview_builder = self.webview_builder.use_https_scheme(enabled);
     self
   }
+
+  /// Whether web inspector, which is usually called browser devtools, is enabled or not. Enabled by default.
+  ///
+  /// This API works in **debug** builds, but requires `devtools` feature flag to 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`].
diff --git a/packages/api/src/webview.ts b/packages/api/src/webview.ts
index a495e135c2c2..d986de39a946 100644
--- a/packages/api/src/webview.ts
+++ b/packages/api/src/webview.ts
@@ -749,6 +749,20 @@ interface WebviewOptions {
    * @since 2.1.0
    */
   useHttpsScheme?: boolean
+  /**
+   * Whether web inspector, which is usually called browser devtools, is enabled or not. Enabled by default.
+   *
+   * This API works in **debug** builds, but requires `devtools` feature flag to 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 }
diff --git a/packages/api/src/window.ts b/packages/api/src/window.ts
index 923b5a3dc8c1..c242e3dd2160 100644
--- a/packages/api/src/window.ts
+++ b/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 {


Test patch: