docs(mobile): IOS & Android Debugging Guides

[IbrahimCSAE]

Android & iOS Debugging for OHIF using Emulators

This guide covers how to debug the OHIF viewer on Android and iOS emulators using Chrome DevTools and Safari Web Inspector, respectively. You can use these tools to inspect elements, debug JavaScript, and view console logs for the web content running on the emulators.

Android Emulator Setup with Android Studio

Prerequisites:

• Install Android Studio
• Ensure you have a recent Android SDK and Emulator installed via Android Studio
• Google Chrome installed on your machine

Steps to Run Android Emulator:

1. Launch Android Studio:

   • Open Android Studio and navigate to the AVD Manager (Android Virtual Device Manager).
   • You can access this by clicking on the Device Manager icon in the toolbar.

2. Create a Virtual Device (if necessary):

   • If you don’t have an existing virtual device, click Create Virtual Device.
   • Choose a device model (e.g., Pixel series) and click Next.
   • Select a system image with the required Android API version and click Next.
   • Finish the setup by clicking Finish.

3. Start the Android Emulator:

   • Once the device is created, click the Play button next to the virtual device to start the emulator.

4. Open a Browser on the Emulator:

   • Once the emulator is running, open the Chrome app on the virtual device.
   • Navigate to the OHIF Viewer URL to view the application. The URL will be 10.0.2.2:3000, you can read more about it here.

5. Debug Using Chrome DevTools:

   • On your development machine, open Google Chrome.
   • Type chrome://inspect in the Chrome address bar and hit Enter.
   • You will see your Android device listed under Remote Target.
   • Click Inspect to open DevTools for the browser on the Android emulator.

6. Happy Debugging!:

   • You can now use Chrome DevTools to inspect elements, debug JavaScript, and view console logs directly from the emulator’s browser.

---

iOS Emulator Setup with Xcode

Prerequisites:

• Install Xcode from the Mac App Store.
• Ensure you have the latest iOS SDK.
• Google Chrome installed on your machine.

Steps to Run iOS Emulator:

1. Launch Xcode:

   • Open Xcode and navigate to Xcode > Settings.
   • Go to the Platform tab and ensure you have an iOS simulator installed for the version of iOS you need. If not you can do so using the + button.

2. Start the iOS Simulator:

   • Open Xcode and navigate to Xcode > Open Developer Tools > Simulator.
   • Select your device from the list of available simulators and click on it.

3. Open a Browser on the Simulator:

   • Run the Safari browser

4. Connect Safari DevTools to the iOS Simulator:

   • On your development machine, open Safari on your Mac.
   • Click Develop in the menu bar and select your simulator under Devices.
   • You will see the web pages open on the iOS simulator. Select the page to open the inspector.

5. Happy Debugging!:

   • You can now use the Safari Web Inspector to inspect elements, debug JavaScript, and view logs for the OHIF Viewer on the iOS simulator.

[netlify]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	05ae64c
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/66e7aac4b790e800087bf2a0

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	05ae64c
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/66e7aac417ee7a000901e81e
😎 Deploy Preview	https://deploy-preview-4371--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress]

Viewers    Run #4270

Run Properties:   Passed #4270  •  05ae64c7af: typo

Project	Viewers
Branch Review	feat/android-ios-debugging-guide
Run status	Passed #4270
Run duration	02m 49s
Commit	05ae64c7af: typo
Committer	Ibrahim
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	2
Skipped	0
Passing	44
View all changes introduced in this branch ↗︎

[sedghi]

Great stuff as always!