If you are running a design agency, your job is very likely to combine business development, graphic design, technology and user experience design: a basketful of very different fields.

Fancy some crib notes? Here are some of the highlights from the report:

Want to see what your website looks like on the iPad? Get a load of iPad Peek, a new web-based emulator that shows you how any site renders on the new Apple device.

Click on the black frame above the browser to switch between landscape and portrait modes. You can also test your web forms by mouse-typing on the virtual virtual keyboard.

For a long time, Mozilla Firefox has been the go-to browser for web developers.  With the Web Developer Toolbar and the Firebug extension, Firefox was an essential part of the web developer’s toolbox.

But if you look in the rear-view mirror, you’ll see Google Chrome racing fast and in some areas blowing past Firefox.

Why do I think web developers should use Chrome as their go-to browser?

Let me explain.

Developers who use Firefox have found that Firebug was their shining light, it brought a solid debugging console, HTML and CSS manipulation, and JavaScript profiling to name a few things.

The team behind the WebKit foundation (upon which Chrome is built), have been working on a set of tools called the Web Inspector.

And with the release of Chrome 4, the Web Inspector has been labeled “Developer Tools”.

To get to the Developer Tools in Chrome:
Windows & Linux users: Select the Page Icon -> Developer -> Developer Tools Mac users: Select View -> Developer -> Developer Tools

JavaScript Console

If you have never worked with Firebug or a Web Inspector console before, then you are missing a great way to debug JavaScript.  The console serves several functions:

1. to capture errors and display them in a useful format
2. allows the testing of short bits of JavaScript
3. easy to log useful information like variable values

But the best part about using a JavaScript console like this one in Chrome is that it allows you to constantly evaluate the performance of a program and to make sure that variables are being calculated correctly.

Elements Panel

I love the ability to quickly view the HTML and CSS styling information of any particular element on a webpage.  This Element panel gives a nicely formatted collapsible-tree-structure view of the DOM (Document Object Model), and easily allows for drilling down to the exact element you are looking for.  Plus, when you are using Chrome, you can access this type of information by simply right-clicking on an item on the page and selecting "Inspect Element".  No need to open up the Developer Tools, it will automatically pop up the Elements panel to the exact location you selected.  You can also modify and add styles, edit html and more from within this panel.

Resources

This is a really cool feature that Chrome provides for web developers.  In a nutshell, the Resources tab provides a quick look at all the information that is being passed between your browser and the server.  It covers everything from images to JavaScript to the actual file itself.  It displays everything in an easy to read chart that highlights things like:

• a graph of how much time it takes to download each component on the page
• a graph that shows the size of each component on the page
• allows you to sort by file type (document, css, images, etc)
• provides image previews with dimensions, size, MIME type
• XML HTTP Request information
• Request and Response Headers

This can be a lifesaver when you are trying to improve the speed of the page.  It can help you identify the resource and performance hogs on your page.

Taking full advantage of the Developer Tools inside Google Chrome can bring many benefits to your development process, but the best benefit is that a streamlined and well coded site (all of which Chrome's Developer Tools can help with) will provide a better experience for your users.