Slug: safari-gets-a-new-web-inspector Date: 2007-06-22 Title: Safari gets a new Web Inspector! layout: post

Yesterday on the Surfin' Safari blog, it was announced that the webkit nightlies have a new web inspector. This new inspector is vastly improved over the previous web inspector and is actually approaching Firefox's Firebug extension in usefulness.

web_inspector_redmonk_menu The new inspector (like the old one) is enabled along with the Debug menu, and is accessed by right-clicking on the page and selecting "Inspect Element". The inspector can be docked to the bottom of the current window (ala Firebug), or left as a floating (and now non-transparent) window.

web_inspector_redmonk_source_sm So what else is new? In addition to the outline-view-based DOM tree the previous web inspector provided, the new inspector lets you switch between a browsable DOM tree and a syntax color-coded view of the page source. It's a vast improvement over Safari's built-in source view. Clicking an element in the DOM view darkens the webkit view, with the element highlighted on the page, and a pane to the right of the DOM view shows all the styles applied to the element, including browser-default styles.

web_inspector_sidebar The web inspector also now provides an iTunes-style sidebar with Documents (the current doc and any iframes, etc), Stylesheets, Images, Scripts, and Other. Clicking a stylesheet shows the source of the css file, clicking an image in the list shows the image and a few useful properties. There is also a search field, so you can find instances of a class, tag, or element on the apge quickly. Clicking a line in the search results highlights the element in the source or DOM view, as well on the page.

So, is it all wine and roses? If I have to ask the rhetorical question then you already know the answer… no. The biggest omission in my mind is the ability to edit the HTML, CSS, or individual element properties and see the page re-render in real time. For web developers (and who else is the target here - I mean really) this ability is Firebug's coup-de-grace and what makes it an invaluable tool for debugging or for pre-flighting some change to your CSS before getting into your editor. The good news is that a bug has already been filed (Web Inspector should have Firebug-like CSS editing) and it looks like patches are on the way.

Overall, the new web inspector is a great step toward making Safari much more developer-friendly; and while Safari is not as extensible as FireFox's, based on a note in the blog post, the new inspector should be easy to upgrade over time:

>So show up in #webkit or on the mailing list and suggest new ideas or implement them yourself (remember everything is HTML, JavaScript and CSS)!

Go WebKit!