#Ionic livereload device how to
#Ionic livereload device android
#Ionic livereload device simulator

Hover over the app name and click on localhost. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device. Use Google Chrome's DevTools to debug an app when it is running in the browser using the ionic serve command, deployed to an emulator, or on a physical device. To inspect a physical device, first you need to have developer mode enabled.

#Ionic livereload device android

Connect your Android device to the computer then go to Settings > About scroll to Build Number and tap that 7 times. This will activate a new option in the Settings menu called Developer Options. Next, go to Settings > Developer Options and ensure that the developer options switch is toggled on. Scroll down to USB Debugging and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator. Open the Chrome browser and navigate to the URL chrome://inspect/#devices. Your connected Android device should show up in the list of Remote Targets. On your device, open the Ionic app that you would like to debug using Chrome. With your app running on the device, head back to Chrome and click on inspect under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device. The app preview may not automatically appear when you open Chrome Developer Tools due to a minor bug. If the Console is hidden, enable it in View » Debug Area » Activate Console.Debugging with Visual Studio locally in Chrome (both Android & iOS) To make it appear, click on the Elements tab then click on any DOM element then toggle off and on any CSS rule and the app preview window will appear. Native logs can be found in Xcode in the Console. If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

#Ionic livereload device simulator

Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector. Safari has Web Inspector support for iOS simulators and devices. Now, when changes are made to the app's source files, web assets are rebuilt and the changes are reflected on the simulator or device without having to deploy again. It can also spin up a development server, like the one used in ionic serve, to provide live-reload functionality.įor Cordova, run the following to start a long-running CLI process that boots up a live-reload server: The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. In Xcode, select a target simulator or device and click the play button.Luckily, this process is made easy with a single Ionic CLI command. The web assets then must be copied into the native project. With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. In this workflow, Xcode can automatically fix common compilation and signing issues that can occur.ĭevelop the Ionic app and sync it to the native project. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled.Under the Identity section, verify that the Package ID that was set matches the Bundle Identifier. In Project navigator, select the project root to open the project editor.See the Cordova documentation for more information.įor Capacitor, run the following to open the app in Xcode:įor Cordova, open Xcode. Generate the native project, if it does not already exist.įor Capacitor, open the file and modify the appId property.įor Cordova, open the config.xml file and modify the id attribute of the root element. Project Setupīefore apps can be deployed to iOS simulators and devices, the native project must be configured. The Xcode approach is generally more stable, but the Ionic CLI approach offers live-reload functionality.

There are two workflows for running Ionic apps on iOS: Running with Xcode and Running with the Ionic CLI.

#Ionic livereload device how to

This guide covers how to deploy Ionic apps to iOS simulators and devices using Capacitor or Cordova.