Skip to content

Debugging

Jump to bottom
0xADADA edited this page Dec 30, 2017 · 3 revisions

Ember Fastboot

Run yarn start-debug to run Ember server in Fastboot mode with node debugging enabled.

Once you see the output Debugger listening on ws://127.0.0.1:<port>/<guid>, open Chrome and visit chrome://inspect. Once it loads you should see an Ember target with a link "inspect" underneath. Click inspect and it should pop up a Chrome inspector window and you can click the ▶︎ icon to let FastBoot continue loading.

Note Use Node v8.4 or greater. Read more about Ember debugging.

Cordova

For iOS/Android apps, remote debugging is possible by redirecting the app WebView on the simulator/device to connect directly to the local development machine.

How It Works: The local development machine runs the ember server in LiveReload mode. Deploy a remote-debugging capable version of the app to your mobile simulator or mobile device. The app is run on the simulator/device, which redirects the WebView to the local development machine running the {{ember}} server. The local ember server is running LiveReload, so changes made to the app will be refreshed on the simulator/device.

iOS Setup

In XCode, create and sign in with an AppleID in order to build and deploy iOS apps to the simulator and to devices. XCode AppleID accounts can be added in the XCode preferences under the accounts tab. This must be done before running ember serve or ember cdv:serve.

Try It

# Run the app on your local machine in remote debugging mode
ember cdv:serve

# Deploy the app to your emulator or device
ember cdv run --platform=ios --emulator
ember cdv run --platform=ios --device

Troubleshooting

Same Network

In order for remote debugging to work, the local machine must be on the same network as the device running on the app. Check that the iOS/Android device is on the same WiFi network as the development machine. The device will connect to the IP address of the development machine.

Websocket 403 error to API.

Whitelist the development machine IP address on API.

API has an environment variable of HTTP origins it will service. This whitelist is https://api.mirai.audio,https://localhost, make sure the development machines IP address is added to the {{ALLOWED_ORIGINS}} environment variable or your websocket connection will throw an HTTP 403 error.

CSP Content Security Policy

In order for the app WebView to load resources from the local machine LiveReload server (remote from the perspective of the device), developer needs to ensure that the IP address of the machine is whitelisted in two places:

ember-cordova/cordova/config.xml

Add your IP address to the list of whitelisted developer IP addresses.

<allow-navigation href="http://10.254.21.30" />

config/environment.js

Add the IP address to the list of whitelisted developer IP addresses to load scripts and connect via XMLHTTPRequest and WebSockets.

ENV['contentSecurityPolicy'] = {
    // ...
    'script-src': [
        '10.254.21.30:*',
    ],
    // ...
    'connect-src': [
        'ws://10.254.21.30:*',
    ],
    // ...
};

Firewall / Incoming Connections

If developer has confirmed both issues above are not the problem, make sure the local development machine allows incoming connections, and your WiFi/internal network does not enforce client isolation.

AppID Bundle

Each developer will need to have a unique appID bundle. This will allow each developer to deploy the app to emulators and devices.

ember-cordova/cordova/config.xml

Customize the widget ID to devlopers first name.

<widget id="com.cinchfinancial.<suzi>" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Then run ember cdv:prepare to generate the iOS project and prior to running ember cdv:serve.

Clone this wiki locally