How Can i Debug an app opened in webView ? Does Ionic provide any tool for this?

ionic-v1
1

How Can i Debug an app opened in webView ??? Does Ionic provide any tool for this??

2

Yes, it’s easy and enabled by default on Android and iOS.

For Android: Plug in your Android device, run Chrome on your Mac (or PC) and go More Tools -> Inspect Devices (or type in URL chrome://inspect/#devices. Check Discover USB Devices. After that whenever your App runs it should appear and you can click inspect to debug it.

For iOS: Plug in your iOS device, run Safari on your Mac and goto the Develop menu. On there you should see your iPhone listed and when your App is running you can choose to debug it using Safari’s web inspector.

Excellent write up at http://www.raymondcamden.com/2013/01/21/Did-you-know-Safari-Remote-Debugging-and-PhoneGap and http://www.raymondcamden.com/2014/01/02/Apache-Cordova-33-and-Remote-Debugging-for-Android

4 Likes
3

Hi,
Thanks a lot for the reply.
I have read about these earlier and tried them too and i was able to debug remotely anything that was opened in chrome or any other browser in my mobile.

But my question was how would you debug some page inside an app, i am not opening the app on any browser. The view is inside a app rather than a browser.

Any help would be appreciated.

Thanks in Advance.

4

If you are able to remotly debug chrome running on device you can also debug your app. Start your app on device and this app should be listed into chrome inspect for debugging.

5

For more improvements you can use Gapdebug.

1 Like
6

Hey,

Ok, so this probably doesn’t apply to you, but I figured, I will throw this in anyway. What’s the term? (my 2 cents? not sure)

I too am using Ionic to build my iOS app and the way my app is structured is something like this open-source project template that I have hosted on Github


So with that I launch my app in the iOS simulator from Xcode and then go to for Safari (browser) I open the “Develop” menu and select iOS Simulator -> index.html. i.e.
Safari menu -> Develop -> iOS Simulator ->

What this does is give me the Safari web inspector and in there I can set breakpoints and all that in the Javascript code.

7

@maqeelqureshi Sadly that’s not true. I get an “inspect” link for a page opened on mobile browser, but cannot get the same for an ionic app.Both running on the same android at the same time. Is there some other config setting required to debug ionic apps? Thanks.

1 Like
8

exact same problem here ^

@dines did you solve it?

9

No, but the routine remote debugging has been good enough for most cases. Some things still do not show up in debugger even in the ionic run --device. For example a select screen (never shows), or when interacting with a canvas (shows sometimes). I don’t know if this is an android issue, chrome issue or elsewhere.

10

Thanks for the reply but the main issue is that i am not able to test any particular screen with that . It is showing full HTML . :frowning: