Hasta la vista Firebug!

The latest set of improved and new features to the Web Inspector are really great. I mean great to a point where I might use Web Inspector as my main web development tool. Those of us who breath web development know how much a tool such as Firebug and now Web Inspector can help.

The latest set of improved and new features to the Web Inspector are really great. I mean great to a point where I might use Web Inspector as my main web development tool. Those of us who breath web development know how much a tool such as Firebug and now Web Inspector can help. Here it is a quick highlight of the updates:

Improved CSS inspection

You can jump to where a particular rule in CSS is defined, view it and edit styles. You can also view user agents style which lets you view the “secret” styles behind Webkit and its forms styles. There’s also a search bar that lets you search HTML elements in your code.

Edit DOM and Nodes trees.

Finally, you’ll be able to edit the HTML of a DOM through an “edit as HTML” mode (right click the code you want to edit) in the context menu.

Timeline Mode

Wonder what makes your website slower? Timeline will check what the browser does and possible what’s bogging down your site until the page is rendered.

Performance tips from the Audit panel

Once you click “run”, Audit’s panel will run a check on your site to see what can be improved to make your site faster. It’ll give good tips on performance.

So far I’m very excited. I really love the Web Inspector UI and I’m looking forward to using it. For more detailed information WebKit Blog.