Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug. Within Safari, select Develop in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on localhost. Running your app. Deploys the Ionic app on specified platform devices. If a device is not found it'll then deploy to an emulator/simulator. IOS: $ ionic run ios options Android: $ ionic run android options Windows: $ ionic run windows options 4.1. Specifying your target $ ionic run ios/android/windows -target='target-name'. To run you Ionic Application on Mobile device follow these steps: Run this command $ adb devices. If, your device is connected, you'll get something like this as output: List of devices attached 020888 device Now, launch your application with: $ ionic cordova run android -target=020888. Pick your preferred device and follow the instructions. Plugin your Android. From the command line run: ionic cordova run android -device -l -debug. Open Chrome and go to the Web Inspector.
Introduction
Ionic 4 is finally here! So in this post we will discuss what is the best way to install, run, and emulate Ionic 4 app. We will also see how to test our app while building. Now this post is for Mac users only.
Prerequisites
Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here
Also we need Ionic and Cordova, So open a terminal window (Mac) and install Cordova and Ionic:
sudo npm install -g cordova ionic
If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
sudo npm update -g cordova ionic
We also need an IDE or Text Editor. Personally I use Visual Studio Code. But you can use any.
We also need Xcode to simulate devices.
Example Configuration
For demonstration purposes, we’re going to create a simple app
Step One — Create a new Ionic Application
First of all open Terminal and go to a directory where you want to create app. You can use following command to go to different directory.
cd Desktop/
To create a new Ionic 4 application, paste this command in your terminal. There are 3 basic layouts we can use when we are creating a new Ionic 4 app.
- Blank
- Sidemenu
- Tabs
In this tutorial we will be using Tabs. How to connect device to android app mac address.
After installing `NPM` modules and dependencies, you will see this question, just type `N` because we are not using it yet.
Install the free Ionic Appflow SDK and connect your app? (Y/n) : N
Next, go to the newly created app folder.
cd appName/
Step Two — Running App
Now we can use following command to run the app in browser. Metatrader app for mac.
ionic serve -l
You will see this question, just type `Y` and press enter.
Install @ionic/lab? (Y/n) : Y
Now we have successfully created an Ionic 4 app and we even tested it by running it on web browser. Perfect!!!
Is that it?
May be there is one more thing we need to do, Now if you open Inspect Element of this page, by right clicking on app, and then click on Inspect
After clicking on Inspect, you will see a new window, Now I want you to click on Console.
You will see something like following image. Now what the Heck are these errors?
So basically StatusBar is a Native Cordova plugin and as we are running our app on web browser, so Native Cordova plugins won’t work like Camera, Push Notifications etc.
Now you can use Ionic DevApp. You can just install it on your iOS or Android device and run app there. The native Cordova plugins will work just fine there.
But while building the app. we will need see console to see all errors. But if we are using Ionic DevApp, we can’t see console.
So what’s the solution?
So we need to run this app in actual iPhone and use Safari Web Inspector to see console. So what if we don’t have physical device? That’s ok as well. https://funbrown493.weebly.com/blog/how-to-uninstall-postgresapp-on-mac. We can run a simulator for iPhone, which will work just like as physical device.
Step Three — Enable Cordova
Run following command to get all Cordova files.
![Android Android](/uploads/1/3/3/2/133279106/760991596.png)
ionic integrations enable cordova
This command is going to create some new files. After that we need to change package id in config.xml file. You have to change the id attribute of widget tag to change your app id.
For Example:
So for my project I am going to change io.ionic.starter to net.flicher
<widget id=”io.ionic.starter” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>
![Mac Mac](/uploads/1/3/3/2/133279106/970565869.png)
<widget id=”net.flicher” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>
Run Ionic App On Android Device Mac Air
Step Four — Running app on Simulator
To run Simulator run following command, as mentioned in Ionic documentation.
Xcode 10 support in Cordova is still a work-in-progress. So they recommend using XCode 9. So either you can install XCode 9 or use following command to get it working with XCode 10. See this issue for details.
Lets understand flags used in this command
-l: Live Reload
-c: Console Errors in terminal
----buildFlag=”-UseModernBuildSystem=0″: Use XCode old build system
-c: Console Errors in terminal
----buildFlag=”-UseModernBuildSystem=0″: Use XCode old build system
After running this command, Simulator will open and app will be installed on it. It will look like this.
Step Five — Opening Safari Web Inspector
Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.
If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.
After you click on Simulator, a new windows will open which will look like this.
You can refresh the app once by pressing Command (⌘)-R on Web Inspector to see console logs. As Live reload is enabled, so if you make modification to your project. The Ionic App will reload it self, when you save the file and you will see the change you made in Simulator. https://funbrown493.weebly.com/blog/how-to-find-app-info-on-mac.
Conclusion
Congratulation, you have successfully created your first Ionic 4 app and ran it on Simulator as well.
Run Ionic App On Android Device Mac Os
What’s next?
Go to Ionic Documentation and add new features to your app.
Ionic App Update
Have fun!