4 ms·

Demo of how to debug code inside a mobile webview

36 points by amirnathoo 14y ago

evadne 14y ago
I think with WebKit there’s remote debugging built in already.
- amirnathoo 14y ago
  Yes, there are various options including using Weinre locally. By hosting Weinre we've tried to make it simpler than making sense of these instructions for example: http://www.webkit.org/blog/1875/announcing-remote-debugging-protocol-v1-0/ http://www.webkit.org/blog/1875/announcing-remote-debugging-...
bjornsteffanson 14y ago
Not trying to be a knob here - is this an improvement over creating a webkit browser window with the same dimensions as your mobile device and changing the browser's user agent?
- amirnathoo 14y ago
  Doesn't seem quite as easy as copying a script tag into your index.html and clicking a link...
- noisebleed 14y ago
  You mean, for example, using Safari to debug mobile Safari / webview-based apps? That'll get you about 80% there, but environment differences (i.e., memory and processor limitations) on the device and quirky rendering behavior in mobile webkit almost always result in weird bugs that traditionally have required a lot of poking around blindly to fix. Differences between the simulator and the actual device are fairly common too. It's only fairly recently that useful debugging tools like this and the built-in iOS 5 stuff have emerged.
rralian 14y ago
Is it just me or does the demo screen just freeze up halfway through? He talks about clicking on things and showing changes, but I just see his screen nothing happening.
- noisebleed 14y ago
  Yup, same here. Still, the overall concept is interesting and potentially useful enough that I'm going to try it out.
- amirnathoo 14y ago
  Oh my bad, looks like there was a snafu exporting from Camtasia so the screen freezes halfway but the audio continues. Fixing now... You hopefully get the gist from the audio in the meantime, or can read up in the blog post or at https://trigger.io/catalyst https://trigger.io/catalyst
  - amirnathoo 14y ago
    Fixed.
bri3d 14y ago
[NSClassFromString(@"WebView") _enableRemoteInspector]; 2) Start simulator 3) Visit http://localhost:9999 http://localhost:9999 in Safari for a full-featured WebKit debugger. I like competition but I'm not really sold on the advantages of this platform over its one-line, built-in alternative.
- natesm 14y ago
  That won't compile under ARC unless you declare +_enableRemoteInspector somewhere: objc_msgSend(NSClassFromString(@"UIWebView"), @selector(_enableRemoteInspector));
- amirnathoo 14y ago
  That's fine if you have yourself setup for native development. We're about helping web developers who don't want to do that.
- noisebleed 14y ago
  I thought that didn't work on the actual device, which frequently is different enough from the simulator that Catalyst could still be extremely useful. Also, I've never looked into it, but is there any comparable built-in debugging method for Android?
ryanwatkins 14y ago
So, almost the exact same thing as PhoneGap - a hosted wienre. http://debug.phonegap.com/ http://debug.phonegap.com/
- amirnathoo 14y ago
  Similar, since it's based on the same open source project: Weinre. We've added a tab to let you track calls out to the native bridge, see error / success codes and the response. Pretty useful when you're working on hybrid apps.
nimbix 14y ago
If anyone is interested, here's also my debugger (with breakpoints and everything!) for debugging JavaScript on mobile devices: http://lexandera.com/aardwolf/ http://lexandera.com/aardwolf/ It works on iOS, Android, WindowsPhone7 and BlackBerry. It's not very polished, though, since I stopped working on mobile projects and don't need it anymore.
deleted 14y ago
[deleted]

36 points by amirnathoo 14y ago

evadne 14y ago

I think with WebKit there’s remote debugging built in already.

amirnathoo 14y ago
Yes, there are various options including using Weinre locally. By hosting Weinre we've tried to make it simpler than making sense of these instructions for example: http://www.webkit.org/blog/1875/announcing-remote-debugging-protocol-v1-0/ http://www.webkit.org/blog/1875/announcing-remote-debugging-...

bjornsteffanson 14y ago

Not trying to be a knob here - is this an improvement over creating a webkit browser window with the same dimensions as your mobile device and changing the browser's user agent?

amirnathoo 14y ago
Doesn't seem quite as easy as copying a script tag into your index.html and clicking a link...
noisebleed 14y ago
You mean, for example, using Safari to debug mobile Safari / webview-based apps? That'll get you about 80% there, but environment differences (i.e., memory and processor limitations) on the device and quirky rendering behavior in mobile webkit almost always result in weird bugs that traditionally have required a lot of poking around blindly to fix. Differences between the simulator and the actual device are fairly common too. It's only fairly recently that useful debugging tools like this and the built-in iOS 5 stuff have emerged.

rralian 14y ago

Is it just me or does the demo screen just freeze up halfway through? He talks about clicking on things and showing changes, but I just see his screen nothing happening.

noisebleed 14y ago
Yup, same here. Still, the overall concept is interesting and potentially useful enough that I'm going to try it out.
amirnathoo 14y ago
Oh my bad, looks like there was a snafu exporting from Camtasia so the screen freezes halfway but the audio continues. Fixing now... You hopefully get the gist from the audio in the meantime, or can read up in the blog post or at https://trigger.io/catalyst https://trigger.io/catalyst
- amirnathoo 14y ago
  Fixed.

bri3d 14y ago

[NSClassFromString(@"WebView") _enableRemoteInspector]; 2) Start simulator 3) Visit http://localhost:9999 http://localhost:9999 in Safari for a full-featured WebKit debugger. I like competition but I'm not really sold on the advantages of this platform over its one-line, built-in alternative.

natesm 14y ago
That won't compile under ARC unless you declare +_enableRemoteInspector somewhere: objc_msgSend(NSClassFromString(@"UIWebView"), @selector(_enableRemoteInspector));
amirnathoo 14y ago
That's fine if you have yourself setup for native development. We're about helping web developers who don't want to do that.
noisebleed 14y ago
I thought that didn't work on the actual device, which frequently is different enough from the simulator that Catalyst could still be extremely useful. Also, I've never looked into it, but is there any comparable built-in debugging method for Android?

ryanwatkins 14y ago

So, almost the exact same thing as PhoneGap - a hosted wienre. http://debug.phonegap.com/ http://debug.phonegap.com/

amirnathoo 14y ago
Similar, since it's based on the same open source project: Weinre. We've added a tab to let you track calls out to the native bridge, see error / success codes and the response. Pretty useful when you're working on hybrid apps.

nimbix 14y ago

If anyone is interested, here's also my debugger (with breakpoints and everything!) for debugging JavaScript on mobile devices: http://lexandera.com/aardwolf/ http://lexandera.com/aardwolf/ It works on iOS, Android, WindowsPhone7 and BlackBerry. It's not very polished, though, since I stopped working on mobile projects and don't need it anymore.

deleted 14y ago

[deleted]