Debugging on iOS
On iOS, all you need to master is the Safari Web Inspector – all iOS versions and devices supported by Supersonic also support it.
However, the Safari Web Inspector requires OS X. If you are developing on a Linux or Windows machine, your only option is unfortunately to use supersonic.logger, which only supports logging messages and errors, but is missing more robust tooling.
Debugging with the Safari Web Inspector
Safari offers a very powerful Web Inspector tool for debugging your app. Apple doesn't allow the Web Inspector to be used on apps downloaded from the App Store (i.e. the regular AppGyver Scanner), so the debugging tools can currently be used only with the iOS Simulator or with custom Debug Builds.
The Safari Web Inspector is the only fully functional Web Inspector tool currently available for debugging Supersonic apps running on iOS, so we recommend using it whenever possible.
Using the Safari Web Inspector
With the iOS Simulator
The easiest way to use the Safari Web Inspector is with the iOS Simulator, where debugging is enabld by default. Open your Supersonic app in the iOS Simulator by typing
s in the Steroids Development Server console.
With a Physical Device
Alternatively, you can use a Debug Scanner or Debug Ad Hoc build for debugging your app. After you have requested, downloaded and installed the Debug Scanner/Ad Hoc IPA, you need to enable Web Inspector for Safari on your iOS device. Go to Settings > Safari > Advanced and enable the Web Inspector option. Then, connect your device to your computer with a cable.
Enabling the Safari Develop Menu
Note: your desktop Safari must be version 6.1 or later. You'll need to restart your computer after updating Safari for the Web Inspector to work.
Next, enable Safari's developer tools. Open Safari's preferences by selecting Safari > Preferences from the top menu, go to the Advanced tab and check the Show Developer menu checkbox.
Now, you should see a Develop menu item in Safari's top menu bar. Open the Develop > iPhone Simulator (or your iOS device's name) menu, and you should see a list of WebViews currently open in your app. (
background.html are used internally by Supersonic.)
You can also skip the Safari menu altogether. When in the
steroids connect prompt, you can use
safari command to get a list of currently open WebViews in the iOS Simulator. The command takes an argument like
sd views/banana/index.html to open the Safari Web Inspector for given WebView. Partial file/path names work also, so if you have an open WebView at
views/car/index.html path you can simply write e.g.
If you cannot see any WebViews in your Safari Develop menu, restarting your computer might help.
Inspecting a WebView
If you type in
window.location.reload(); or press CMD + R, the WebView reloads itself, which allows you to see network requests and possible console errors that happen when the WebView loads.
When using LiveReload, the Web Inspector windows are kept open when the app refreshes. However, if you disable LiveReload with the
--no-livereload flag or initiate a full refresh by running
refresh in the Steroids Developer Sever Console, all open Safari Web Inspector windows are unfortunately closed. You need to manually re-open them after the app has reloaded.
dSYM files stores the debug symbols for your app making it possible for e.g. services like crashlytics to replace the symbols in the crash logs with the correct method names. dSYM files are available in the Build Service for all iOS builds.