The just-released Safari 3.1 has a new “Develop” menu (check the Advanced tab in Preferences to activate it). I usually rely on Firefox’s Web Developer Toolbar for testing and diagnostics — but preferring Safari as my general browser of choice, I was happy to see some native tools baked-in.
It also ships with a Web Inspector (think Firebug), which allows you to break down a web page by listing it’s various files, drilling down to see computed styles and DOM info. At first glance this looked exciting and very promising, with “editable CSS” promised in the release notes. Unfortunately, you can’t edit the full CSS file (a feature we’d all love, and one that’s found in other developer extensions), but rather choosing “Inspect Element” by right clicking on a web page’s element will activate a semi-confusing-but-comprehensive status on that particular bit of code selected. I was initally confused by choosing “Inspect Element” on one of the CSS files in the list view in an attempt to edit it, only to find that the Inspector was in fact inspecting itself (which is apparently built with HTML and CSS). Heh, recursive inspection. Recurspection. Inspursive.
It seems I wasn’t the only one confused, with a chorus of Twitterers wondering the same thing: how the heck can I edit the CSS? The answer is by choosing “Inspect Element” from the browser window (a right or ctrl click), then double-clicking a property from the Styles sidebar in the Web Inspector — but not in the “Computed Style” box that’s also in the sidebar.
So, it’s a start. I’d love to see full live editing of CSS and HTML in a future version — but it’s nice to see the beginning of all of this built right into the browser.