Web app performance tracing on Mobile Safari? - performance

We work on a web application (HTML5 / JS) where performance is critical (physics simulation).
There are a few great options to trace performance on desktops: Chrome Dev Tools timelines, chrome://tracing or the promising Web Tracing Framework. The last option seems like the most powerful one. It also supports remote control of Chrome for Android, but unfortunately Mobile Safari is unsupported.
Do you know any other tool that can be used to precisely measure performance on Mobile Safari?
I know I can debug pages on Mobile Safari with Mac Safari and perhaps access timeline and/or profile tools too. Is this the only option? Do you know other interesting ways of performance tracing a webapp on Mobile Safari?

Have a look into Weinre a fantastic remote debugging tool based on webkit's developer tools:
http://people.apache.org/~pmuellr/weinre/docs/latest/
The timeline tool is still in the early stages but you can create your own timeline events.

For webapp's performance,with enough experience you can tell from the page's debug borders(Compositing Render Layers) and repaint counters,they are not powerful like Web Tracing Framework does,but in many case they help a lot.Web Tracing Framework already works on android chrome,for mobile safari,mac safari's develop tool also can enable to inspect mobile safari's debug borders and repaint counters,also if you dont got a mac,you can just try MIHTool which you can enable debug borders and repaint counters in the app on you iOS device.
Check out Mobile Web Thursday: Dev Tools to learn more about it.

Related

Test Webforms Masterpages with Mobile browsers

What is a good way to test a Webforms website with a mobile master page from code? Electric Mobile Studio works but it is not free.
I use Chrome DevTools (Ctrl+Shift+I).
From DevTools you can toggle device tool bar (Ctrl+Shift+M).
Once open you can view as different:
devices
resolutions
network speeds
and change from portrait to landscape.
This is the best solution I have been able to find in the past year+
Chrome has an extension called "User-Agent Switcher for Chrome." It can be used to switch to iPad and other views that will invoke the mobile master page.
The main strength of this solution (for me) is that it can be used from code in debug mode.
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

Debugging tools/methods for phonegap blackberry app

Are there any tools/methods for debugging phonegap Blackberry(5,6,7) app . Presently am using Alert for debugging which is very tedious .
Since you are using PhoneGap, its always better to view/debug you app on a webkit browser like Chrome/Safari. Also try Ripple emulator from BlackBerry which is the best web emulator for mobile devices: https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en
Since you are developing a web app, and as far as I know there's no "official" IDE for BlackBerry Webworks, this question is not BB or Phonegap specific. You are just asking how to debug JavaScript. There are a lot of questions in SO about this, just run a search. I'll give you my two cents:
As the JavaScript code runs in a browser, you need to debug in the browser. Most browsers have built-in debugger or extensions. For Firefox I'd reccomend Firebug extension, in Chrome the built-in debugger is pretty good. I can't tell about IE but I think there's something similar.
If you need to debug on device, then use console instead of alert.
Finally, have a look at WebStorm. Probably the best IDE for JavaScript right now, but you need to purchase a license. It allows you to attach to the browser debugger and debug in the IDE.

Debug + Breakpoints with Trigger.io catalyst

I'm doing research on choosing a w3 framework for mobile apps(native) and came across trigger.io
As some of the team come from a very corporate / enterprisey background, Breakpoints + Debug is a key feature. I've watched the catalyst video and it looks very cool. However I didn't see breakpoints being set.
Do you know if its possible to set breakpoints + debug in trigger.io? Can I remote debug javascript when my app is running on device?
Thanks
Trigger.io Catalyst is a hosted version of the Weinre open-source project. Unfortunately it does not support setting break-points.
It is possible to display log messages in the console and to query the DOM and JavaScript namespace from the console which is a big step up from alerts.
One approach to development is to build the user flow on the web first so you can use the Chrome debug tools with breakpoints. And then add the native features (which can only be tested on the device / emulator) at end. Trigger.io's build to web feature supports this mode of development:

Titanium native UI on desktop

I would lie to build a desktop app with Titanium and i thought that the API would give me access to a native ui for desktop. But reading the documentation it seems like the native ui api is directed only to mobile development, while for desktop you have to build the UI yourself in html and js and it will not be native code (with the risk of low performance animation and graphic).
Am i right?
Thanks
Yes you are right. Titanium Desktop only WebKit UI is possible: HTML5+js and/or PHP/Ruby/Python. You can see Tweetanium on git to see how Desktop/Mobile application can be designed. But simply also in mobile you can use a webkit view... It'sn't fast as native UI on mobile but it makes your UI code reusable in both world.
This is exactly what happens on PhoneGap project.

Debugging web app on the palm pre?

I have a web app that works fine on desktop browsers, but struggles on the palm pre browser (via the emulator). How do I debug the app on the palm pre browser? There doesn't seem to be any error console, dom inspector, etc... I'd expect such tools from a web-app oriented phone.
The debugging tools on the webOS platform are generally still poor, and thats speaking for the application development.
I dont think there is any debugger for the web browser. You're stuck with document.write and related.
And for applications themselves, its better, but not by much. There is a command line debugger that you can use to set break points and inspect. There is also an inspector based on Safari that you can use to inspect the dom and such. And there is basic info/warn/error debugging to syslog. But these are for applications using the Mojo framework, and not exposed to web pages.
That said, the browser is based on Webkit, so its fairly close to Safari 4. There are some good sized chunks missing in Canvas and advanced CSS support. Browsing the developer forums will help see what CSS and Canvas features are missing or broken.

Resources