Developing APEX Applications in Google Chrome

Earlier this year I read Scott Wesleys post called Why I use Google Chrome for Oracle Apex Development, but it did not quite register then. Recently I started using Google Chrome as my main APEX development browser.

The sole reason for starting development in Chrome was the speed, but over time I have become more familiar with it's web developer environment. Here I will sum up some of the features I use, and my experiences so far.

Invoking Chrome Developer Tools
Besides the blistering speed of the browser, the native developer tools in Chrome is a great feature.

There are a number of ways to start the developer toolbar

• You can click the icon in the upper right corner (tedious)
• You can right click anywhere on the page (handy)
• You can press <ctrl> + <shift> + I (handy indeed).

You can also press <ctrl> + <shift> + J to go directly to the javascript console.

The developer tools are feature rich, so I will only highlight some of the features.

Elements
This is the default screen when starting developer tools. You get what you expect from an element inspector (like Firebug):

• Formatted HTML source code and instant view of element styles (also computed overview of all element style attributes in play)
• Navigate through source code with keys or mouse to highlight page elements
• Click the magnifying glass at the bototm and click page elements to inspect single elements
• Double click element to change it (both in HTML document and element style attributes)

Resources
Resources gives you an overview of the complete page including external files. It sports an easy graphical view over how much time each part takes (like the Net tab of Firebug). Click any resource to view content and headers. It also gives you a nasty red dot with (preferrably a low) number in it, if the browser encounters any structural error in the documents it has to rewrite. If you click the document, the rewrites are highlighted so you can correct the issues.

You can filter the resources by clicking the buttons (like Stylesheets, Images, Scripts, etc.).

One of the features I liked most about Firebug, was the ability to easely track AJAX calls (from the console or Net). Resources tab in Crome has the same ability, just click XHR-button (XHR = XML HTTP Request) to view AJAX type requests and responses.

Console and Scripts
The console has it's own shortcut keys, <ctrl> + <shift> + J gets you directly there. The console will display all errors encountered by the browser to start with, and let's you write javascript to interact with the page.

The Scripts tab let's you view, alter and debug javascripts

• Set/enable/disable breakpoints
• Play/pause, step in/out/over, etc.
• View and change variable values

Other Features

• Timeline - Nifty feature to watch real-time javascript events as you interact with the page. Filtering options are available (Loading, Rendering, Scripting).
• Profiles - Profile your pages (or actions on page) in view of CPU intensity or memory usage
• Storage - The only real use I have for this is the Cookies overview.
• Audits - This is like YSlow for Firefox, giving you advice on how to speed up your pages

Extensions and Userscripts
All the features mentioned above is integrated in the browser, in addition, there are a number of extensions you can download. I just have Web Developer installed, but you can browse Google Chrome Extensions for more. You can also see Creating a Web Development Environment using Google Chrome Extensions from Speckboy Design Magazine for more on related extensions.

Sadly, the APEX Builder Plugin does not work for Chrome. I use my own userscript to get shortcut keys working in the APEX builder. Many of the Greasemonkey userscripts also works in Chrome, see userscripts.org for a large amount of those.

Experiences so far
I now go days without resorting to Firefox and Firebug. (In truth, that is not just Chrome's achievement. Dynamic Actions in APEX 4.0 makes rich interfaces much, much easier than it was.) I find that most of what I need, most of the time is in place within the developer toolbar of Chrome. I can also work full working days without having to restart the browser because of memory leaks, etc (browser getting sluggish, you know what I am talking about...).

Oh, did I mention it is fast?

For future reference: This was written based on Google Chrome version 6.0.472.53.