1. How To Connect Mac To In App Browser Cordova Chrome
2. How To Connect Mac To In App Browser Cordova Version
3. How To Connect Mac To In App Browser Cordova Windows 10

However, I get many questions from people regarding how to test their Apache Cordova, PhoneGap or Ionic Framework application running on iOS. In this guide I’m going to walk through the steps for troubleshooting code using an iOS simulator and the Safari web browser. Before going any further, note that you’ll need a Macintosh computer with.

How To Connect Mac To In App Browser Cordova Chrome

Have you tired of searching the ionic and Cordova (PhoneGap) setup tutorial? We have written step by step instructions for you. This article is common for both Windows & Mac. Please do not skip any single steps.

We have also added checklist on every step & included

Note: You must need a mac if you want to build your app for iOS

Tools Required

1. Node JS
2. JAVA JDK & JRE
3. Android Studio
4. XCode (available only for mac)

Step 1: Download & Install nodeJS

Node JS is used as an environment for running ionic & cordova.you can download Node JS (stable) using https://nodejs.org/en/download/

Checklist:

1.1: I have downloaded & Installed Node JS

1.2: I have opened Command prompt & Executed node -v & npm -v without any error

Step 2: Installing Cordova

For installing Cordova on your machine, you need to open your command prompt/terminal & execute

Checklist

2.1: I have Installed Cordova & I can run cordova -v without any error

Step 3: Installing Ionic

If you want to install ionic, you can open your command prompt execute

Checklist

3.1: I have Installed Cordova & I can run ionic --version without any error

Step 4: Download & Install Java JDK & JRE

JDK & JRE are supporting software/libraries for Android Build. Download JAVA JDK from http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html. Download JRE using http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html

Checklist:

4.1: I have downloaded & Installed both JDK & JRE
4.2: I have re-opened Command prompt & Executed java -version without any error
4.3: I have re-opened Command prompt & Executed javac -version without any error

If you faced any issue like, command not found, you must need to do path setup for your java. Please refer below

Reference:

Please don’t move next step without completing the above checklist

Step 5: Installing Android Studio

Android Studio is used for building & generating apk files for your project. Download Android Studio from https://developer.android.com/studio/index.html

Reference

Checklist:

5.1: I have downloaded Android Studio & Installed Successfully
5.2: I have Opened Android Studio & Created First Project Successfully
5.3: I have created an emulator & run my first project successfully

Path setup for Android

You need to setup a path for your android for building your app from the terminal. The path might vary based on your system. Please refer the reference link

For Windows

For Mac

Reference:

Cheers!! Hope this helps.

If you faced any issue, feel free to comment below.

Useful Links

Although the debug on android application using Android studio (a native android app) is quite easy, debugging on a cordova application can become a big nightmare if you don't have the correct tools. You'll find that fix something on the code, compile, check on the device, check the code again, compile again and found the same error is nothing productive.

To debug a cordova application we will use the Chrome debugging tool which can be accesed in Google Chrome (desktop version).

Note

This method works to debug normal websites in Google Chrome as well.

Requirements

• Patience (In some desktop computers, set up this process can take longer)
• An Android device (with Android >= 4.4) and a USB cable
• Google Chrome (>= v.30)
• More patience

Setting up the debugging

The process consists of 3 steps :

1. Enable the developer mode on your android device
2. Set up inspect mode in Google chrome desktop
3. Start debugging

1. Enable developer mode in android

To be able to debug your Android device with your computer, you must first enable the USB debugging in your device. This option is hidden by default and we need to make it visible, go to Android Settings > About phone (last option).

First tap 7 times on the Build Number (is the last option too), then a message that 'You're a developer now will appear'. Followed, go back to the settings and you will see now a new available option in the menu.

Tap on this and go to the last option (Debugging : USB Debug mode when usb is connected).

How To Connect Mac To In App Browser Cordova Version

Now you'll be able to debug your cordova application on chrome.

2. Set up inspect mode in Google chrome desktop

Then navigate on Google chrome to the following url :

You'll get the following image if everything went right :

Click on inspect according to the app that you're debugging and is active on your device and inspect like you do on web projects.

3. Start debugging

Finally, debug your application without limits in the same way you do with web applications in the browser.

Important notes

Some devices requires that your desktop have the appropiated driver installed (for example if you have a Motorola , you need to download the drivers of Motorola for you desktop and then everything will work fine).

If you've already installed the drivers, and chrome://inspect still without showing any devices, then the ADB Daemon is not being started. To start the Android Debug Bridge, open a new terminal and switch to the SDK directory of Android, specifically into the platform-tools folder using the cd command:

And execute the following command:

That should list all the connected devices in the console:

How To Connect Mac To In App Browser Cordova Windows 10

Once the devices are listed in the console, they should be now listed in chrome://inspect.