How to investigate IOS Safari crashes using Chrome

I’ve worked some days on a web app application, completely written using  jQuery, jQuery Mobile and Kendo UI Library.

The application worked successfully on the Android devices but, on Iphone/Ipad crashed unexpectedly.

I’ve tried to investigate the crash logs on the device, with no fortune.

I’ve also connected the device to a mac and tried to debug the web application using the Web Inspector, following these steps http://moduscreate.com/enable-remote-web-inspector-in-ios-6/ , but , when Safari on IOS crashed, the Remote Web Inspector on my Mac was closed too, with no possibility to find what was the latest javascript instruction.

I’ve discovered on the web a great project that enables Chrome debug on Safari for IOS, here is the link:

https://github.com/google/ios-webkit-debug-proxy

You need to install :

• Xcode
• Brew http://mxcl.github.com/homebrew/
• Chrome for Mac

After the proxy installation you need to execute it on your mac using :

ios_webkit_debug_proxy

Start the IOS simulator using XCode:

Connect chrome on your Mac to the address…  http://localhost:9221

Choose the device:

Here we are: Chrome web tools debugging Safari!

Network Panel:

Console window:

If Safari crashes… you will be able to see the console message in the web tools window.. this should save a lot of time when you try to find the crash point.

Some tips:

• don’t use web apps inside iframes : Safari on IOS in really unstable



• if you need to use jQuery ready event…. wrap the code inside a function and add a timer and call it after 100-200 ms



• sometimes working on css style overflox-x overflow-y seems to crash Safari



• read the Apple guidelines for web apps:

Hope it helps!

Matteo

Browserstack : real web-based testing on VM

Today I’ve discovered a great testing service : browserstack.
You can test using a REAL OS your web pages, and see it using : Windows XP, 7, 8, OSX Snow Leopard, LION … and also IOS/ANDROID using the emulators.

Available browsers on Windows 7:

You can test a public url over the internet and …. an internal URL.

Wait! Internal URL?

Yes you can also test your local web application using a little java proxy program:

And after the connection:

After the connection:

And here is the test VM (the screenshot refers to a local web page on different port):

The only word to describe this service is : MAGIC!!!!!

Note: this is a real OS (with limited features for security reasons), here is the demonstration:

XP:

OSX:

Chrome Developer Tools Autocomplete

If you are using Chrome Developer Tools and you don’t remember a specific CSS value you can ….

Click on the css property and type CTRL + SPACE, the complete list of the accepted values will appear.

 

Hope it helps!!!

Change CSS and SAVE on local file system using Chrome Developer Tools

I’m using chrome for development and I’ve discovered this cool features.
Using the Chrome Developer Tools you can inspect css properties and change on the fly the values.
Try it on CSS garden, download this two files:  html file and css file, and play with them.
Original page:

Inspect some elements and change the css properties:
from:

To:

Here are the changes:

Like it? Click on the css name on the right

Chrome will go to the Resources Pages…

Right Click and… choose SAVE, the first time it will ask you the position of the local CSS file…

Next time the SAVE option will save the file silently without popups.
This trick is useful if you use external css files, it doesn’t work on server pages with hard coded css.

UPDATE:
Here is the link to the Google IO 2011 presentation of this functionality: http://youtu.be/N8SS-rUEZPg, the first section of the video shows the CSS edit improvements in Chrome developer tools.