Safari 3.1 Develop Menu

Web Inspector

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.

I often run these “bulletproof integrity tests” after finishing an initial design: disabling styles, javascript and images to check for readability and flexibility. Favlets and Firefox extensions have made this easy for years, and Safari’s new Develop menu has several of these. Excellent, I said.

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.

21 Comments

  1. Greg William says:

    I just downloaded the Mac Software Update. I’m just checking out the new Safari. Seems to look promising. Good article!

  2. Dean says:

    I wouldn’t exactly the “develop” menu a “new” feature, since it seems to the much the same as the ‘debug’ (I think thats what it was called) menu that could be turned on in previous versions. Same for the Web Inspector it was there in 3.0 the only new thing I’ve found so far is the ‘editable’ CSS.

  3. Matt Wigham says:

    I was excited to see this as well. I wish Apple designed everything.
    Right off the bat, a couple simple things I was missing with the web inspector were:
    1) A lil icon somewhere showing me there was an error like firebug does. That way you don’t have to always have it open to catch errors.
    2) This is something that has bugged me for ages. Syntax highlighting the HTML when you “View Source”!

  4. CSS editing is indeed confusing and needs to be reworked, but otherwise I welcome the addition of the development tools. Now all I need is more features, like firefox’s firebug plugin and I will be a happy person.

  5. Alex says:

    On my windows machine the developer tools don’t work. Nothing happens when I click on them… what a shame

  6. kevinn says:

    Same here with Alex. Bummer.

  7. kevinn says:

    Tried it again… on a WinXP machine.
    It just not as instant as we’ve used to, like in Firebug, you just have to wait for Safari to reload(?)/compute the items, just wait for a few seconds.

  8. Nick Toye says:

    Anyone used that User Agent option. To me that looks like I could view the site in how IE6 renders it. Debugging wise that would be excellent.

  9. A.Fruit says:

    Yeah, I also turned this on as Dean mentioned is the last few releases.
    The First implementation was much different, giving you the semi-transparent black HUD window, but obviously along the line the decided to give it a full window. I kinda thought the HUD was cool, but I could see arguments to remove the transparency of it. I do use the bookmarklet XRAY which does some nice things.

  10. Olly says:

    Nick — All that does is change the user agent string that Safari sends to web-servers (so it can pretend to be whatever browser you select from the list).
    It can be useful to work around some badly written browser-detection scripts, but it doesn’t actually change the rendering at all.

  11. Matt Crest says:

    The User Agent is great for testing iPhone web apps (where the User Agent can control if the page is viewable or not). Just used it this morning and I was able to find a few places where the some code had gotten lost in translation from front-end to back-end developers.
    However, in-line editing of html and/or complete css would make this even closer to what Firefox has already.

  12. Nick Toye says:

    @Olly, that’s a shame – I suppose if that was the case then more waves would have been made about it.

  13. Seth Scott says:

    Too bad Safari is still ridiculously unstable on a IAS password protected network (aka at work) and has only gotten worse over the last two safari updates.

  14. Karl says:

    Seth, have you put bug reports in regarding the issues?
    Nick, the User Agent options sends the user agent string so the site will serve up what it has for that particular agent. The browser will still use it’s rendering engine, and will not render the site how IE (for example) will render it. To do so would require several rendering engines in the browser, adding much bulk, and causing all sorts of potential licensing issues.
    I also second syntax highlighting when viewing source. This small addition would make it so much more valuable.

  15. SRV says:

    I’ve been using (or not using as the case may be) this for several months now as it’s been in the WebKit nightly builds for ages.
    I was very excited when I heard about it but unfortunately it’s pretty half-baked. I am sure it will be as good as FireBug one day and hopefully improve on it eg undo, saving incremental changes.
    It just feels really really clunky for now. So it’s back to having FF open alongside WebKit just to dev with. It’ll be great when I can just use one browser -Safari is just so quick now I can’t handle how slow FF is.

  16. Don’t you think that choosing “Inspect Element” then opening a new tab (or switching to another tab) — without closing the web inspector widget first — should mask the grey overlay?
    Also the very same sequence of actions may move this overlay outside of the window viewport (!?) — I guess it depends on the way some CSS layouts are implemented.

  17. usozaydqtu says:

    xolTiD fixswjwuwbxc, [url=http://vpivokdkgrxp.com/]vpivokdkgrxp[/url], [link=http://ocxqbqbxjmgq.com/]ocxqbqbxjmgq[/link], http://uwgifnpumbwz.com/

  18. Nathan says:

    Hi Dan,
    Thanks for the write-up. I admit I’m still a bit confused, though — I’ve long wondered how to edit the CSS using the Inspector and even following your instructions, I still can’t figure it out. Everywhere I click in the ‘Styles’ sidebar, I just get static text: nothing editable. Am I missing something?

  19. Galen King says:

    It’s a bit rough in its implementation in terms of usage but a good start and certainly will come in useful.

  20. Galen King says:

    Why can’t someone make an interface that truly simulates different browsers instead of just allowing you to change your user agent, too.

  21. Max says:

    HUD is cool, but I could see arguments to remove the transparency of it. I do use the bookmarklet XRAY which does some nice things.