Debugging Web Pages and PhoneGap apps on mobile devices

If you are a web developer chances are that Google Chrome Developer Tools, Safari Web Inspector, or a Firefox equivalent are your best friends when it comes to debugging web pages (check CSS styles, verify generated HTML, or debug JavaScript). Isn’t that great? I mean not so long ago we used to debug JavaScript using alert() calls.

Once you get used to these tools it is hard not to have them. And this is exactly what happens when you move to mobile web development. As you probably know there is no web inspector running on your iOS device browser.

How do you debug your web apps when running on mobile devices? The best answer to this question is using weinre (if you know a better way, please let me know).

January 10, 2012 | Filed Under HTML, JavaScript, Tutorials | 1 Comment

CSS Regions running in Chrome 15

The latest release of the Chrome browser (15 was launched last night) makes Chrome the first browser that offers support for the CSS Regions feature. This is really amazing as the story has been developing for a little bit more than a year: from the initial idea, to the first proof of concept, then working with the standards bodies and WebKit, and finally to Chrome 15.

If you have the latest Chrome on your machine (should work on both Windows and Mac OS) you should be able to test this page. Just play with the size of your browser window and you should see how the text fills the three different columns.

PS. Just talked to the Adobe engineers that work on this and they told me that there might be a small glitch with how the text flows sometimes. But this has been already been fixed in the main line. So probably the next update of the Chrome will pick up this change.

Later Update: Peter Elst dropped me a message telling me that the CSS Regions examples we host on Adobe Labs don’t work in Chrome 15. This is true and normal at the same time. The examples we have there represent one of the first drafts of CSS Regions. Since then the syntax has changed. This is why I included a page for test in my post.

Later Update 2: Someone told me that Internet Explorer 10 already supports CSS Regions. This is true, but IE 10 is a pre-release version while Chrome 15 is a “production” ready release.

October 27, 2011 | Filed Under HTML | 3 Comments

CSS Regions Prototype Available Now

Maybe you remember the cool demo we showed at MAX last year: a modified WebKit browser that was capable of dynamically wrapping the text inside or around arbitrary shapes. I’m excited to say that this week we’ve made available the first public preview for this project. You can go to Labs and grab the bits for your operating system (Windows or Mac OS). What you will get is a modified version of the WebKit engine (the same engine used by Apple’s Safari and Google’s Chrome).

Below you can see some examples of what this feature enables:

So what is this feature exactly? We call it “CSS Regions” and it is Adobe’s proposal to W3C to extend CSS capabilities. Having this feature enabled in browsers will help to create magazines/news papers more easily and with better quality and performance. Adobe is not only working on the proposal specifications together with the W3C but it is also working on an implementation for the WebKit browsers.

You can read this article for more about CSS Regions and don’t forget to go to Labs to grab the bits.

May 12, 2011 | Filed Under HTML | Leave a Comment