#appium_IP_geolocation_sidebar_change

docs/devtools-on-real-devices-app.md

@@ -0,0 +1,104 @@
+---
+id: devtools-on-real-devices-app
+title: Dev Tools On Real Device
+sidebar_label: Dev Tools
+description: Inspect and debug embedded web views in real mobile devices using LambdaTest's DevTools.
+
+keywords:
+  - webview debugging on real device
+  - inspect hybrid app webview
+  - LambdaTest webview tools
+  - real device DevTools
+  - simulate GPS location iOS
+  - mobile web view inspection
+  - webview console logs
+  - DOM inspection mobile
+  - app testing
+  - real devices
+  - chrome devtools mobile
+  - safari devtools mobile
+  - app testing webview
+url: https://www.lambdatest.com/support/docs/devtools-on-real-devices-app/
+site_name: LambdaTest
+slug: devtools-on-real-devices-app/
+---
+
+import CodeBlock from '@theme/CodeBlock';
+import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<script type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify({
+       "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://www.lambdatest.com"
+        },{
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Support",
+          "item": "https://www.lambdatest.com/support/docs/"
+        },{
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Screen Reader on Real Devices App",
+          "item": "https://www.lambdatest.com/support/docs/devtools-on-real-devices-app/"
+        }]
+      })
+    }}
+></script>
+
+Testing hybrid apps or mobile websites that rely on embedded web views often requires advanced debugging capabilities. With LambdaTest, you can inspect and debug these web views directly on **real Android and iOS devices** using familiar tools like [**Chrome DevTools**](https://developer.chrome.com/docs/devtools/) and [**Safari Web Inspector**](https://developer.apple.com/safari/tools/#current).
+
+This enables seamless inspection of DOM elements, console logs, network activity, and JavaScript execution—giving developers the same debugging power they enjoy on desktop browsers.
+
+
+
+## Access DevTools on LambdaTest Real Devices
+
+**Step 1:** Log into your LambdaTest dashboard and navigate to **Real Devices** > **App Testing**.
+
+**Step 2:** Choose a real Android or iOS device, upload your app (APK/IPA) or open a browser URL, and click **Start** to launch your session.
+
+**Step 3:** Once your app or mobile website loads, go to the screen with the WebView content.
+
+**Step 4:** In the session toolbar, click on the **Chrome Dev Tools** button.
+
+<img loading="lazy" src={require('../assets/images/real-device-app-testing/Real_device_chrome_devtools.png').default} className="doc_img"/>
+
+**Step 5:** A debugging window will open:
+- On **Android**, this launches Chrome DevTools.
+- On **iOS**, you can choose between Safari Web Inspector or Chrome DevTools.
+
+<img loading="lazy" src={require('../assets/images/real-device-app-testing/real_device_safari_devtools.png').default} className="doc_img"/>
+
+Use the DevTools interface to inspect HTML structure, debug JavaScript, monitor network requests, and view console logs in real time.
+
+
+---
+## Supported Platforms
+
+| Platform | Debugging Tools Available | OS Versions Supported |
+|----------|---------------------------|------------------------|
+| Android  | Chrome DevTools           | Android 8 and above    |
+| iOS      | Safari Web Inspector, Chrome DevTools | iOS 11 and above    |
+
+---
+
+## Use Cases 
+
+-  Inspect embedded content in hybrid mobile apps  
+-  Debug JavaScript errors or performance issues  
+-  Test mobile websites inside native wrappers  
+-  Validate responsive design and layout within WebViews  
+-  Troubleshoot third-party widget rendering or data fetching  
+-  Test ad placements or dynamic content in app containers
+-  Analyze network requests, responses, and timings to optimize your network.
+-  View and edit DOM elements.
+
+---

sidebars.js

@@ -1904,7 +1904,7 @@ module.exports = {
             type: "category",
             collapsed: true,
             label: "Features",
-            items: ["camera-image-injection-on-real-devices","ip-geolocation-on-real-devices-app", "biometric-authentication-on-real-devices", "contacts-on-real-devices", "real-device-adb-shell", "ui-inspector", "screen-reader-on-real-devices-app", "accessibility-settings-ios"],
+            items: ["camera-image-injection-on-real-devices","ip-geolocation-on-real-devices-app", "biometric-authentication-on-real-devices", "contacts-on-real-devices", "real-device-adb-shell", "ui-inspector", "screen-reader-on-real-devices-app", "accessibility-settings-ios","devtools-on-real-devices-app"],
           },
         ],
       },
@@ -2572,7 +2572,7 @@ module.exports = {
               "supported-appium-versions",
               "supported-appium-plugins",
               "list-of-supported-locales",
-              "appium-ip-geolocation",
+              //"appium-ip-geolocation",
               "supported-timezone",
               "app-testing-apis",
               "appium-lambdatest-hooks",
@@ -2592,7 +2592,7 @@ module.exports = {
               "regular-expression-appium",
               "appium-upload-media",
               "app-auto-network-throttling",
-              //"appium-ip-geolocation",
+              "appium-ip-geolocation",
               "appium-app-performance",
               "appium-ios-app-settings",
               "ios-keychain-cleanup",
@@ -2602,6 +2602,7 @@ module.exports = {
               "appium-custom-header",
               "basic-authentication-for-web-automation",
               "live-debug-in-app-automation",
+
             ],
           },
           {