diff --git a/assets/images/real-device-app-testing/Real_device_chrome_devtools.png b/assets/images/real-device-app-testing/Real_device_chrome_devtools.png new file mode 100644 index 000000000..2aee57a87 Binary files /dev/null and b/assets/images/real-device-app-testing/Real_device_chrome_devtools.png differ diff --git a/assets/images/real-device-app-testing/real_device_safari_devtools.png b/assets/images/real-device-app-testing/real_device_safari_devtools.png new file mode 100644 index 000000000..056c35245 Binary files /dev/null and b/assets/images/real-device-app-testing/real_device_safari_devtools.png differ diff --git a/docs/devtools-on-real-devices-app.md b/docs/devtools-on-real-devices-app.md new file mode 100644 index 000000000..aca61de7d --- /dev/null +++ b/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'; + + + +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. + + + +**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. + + + +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. + +--- \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 3fb3f7a1d..d81f8918b 100644 --- a/sidebars.js +++ b/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", + ], }, {