feat: add WebviewWindow/Webview::devtools (#11451)

* feat: add `WebviewWindow/Webview::devtools`

closes #10849

* clippy

* fix ToTokens

* document default behavior

* move builder usage

---------

Co-authored-by: Lucas Nogueira <lucas@tauri.app>

Author: amrbashir

.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

@@ -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

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")]

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.

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

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
       );
     }
   }

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.

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`].

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 }