Safari 3.1 web developer functionality

I’ve just upgraded to Safari 3.1 and I’m trying to catalogue the list of available functionality.

I’m certain this upgrade is driven by the announcement of the SDK for the iPhone, because in the demos showing that web development has been upgraded, it shows how features can be exploited on an iPhone – but as developers on our Macs, Safari 3 didn’t support most of these features…yet.

Here’s a list of the main features I’ve found to be now working in Safari 3.1 and previously weren’t available on Safari 3.0.

† I’ve asked John whether jQuery will sniff for this functionality in the find method – which would be a massive boost to the selectors…whether it’s easy or not is another matter.

The inspector has also been upgraded to edit CSS styles (thanks Mark for the correction) – and it includes the fonts downloaded and the local database stored values.

Finally, though Safari 3.1 is not the latest version of WebKit (obviously), it’s definitely moving closer towards 100% on the Acid 3 test. Here’s the current stats:

  • Safari 3.0 – 38/100
  • Safari 3.1 – 74/100
  • WebKit – 93/100

7 Responses to “Safari 3.1 web developer functionality”

  1. Annoying the inspector hasn’t been upgraded to edit CSS styles as it is in the Webkit version (though personally, my copy of WebKit doesn’t let me change the CSS styles) – though it does show fonts downloaded and the local database stored values.

    Safari 3.1 does support editing CSS rules via the web inspector. You may be running in to which was fixed in WebKit very recently.

  2. @Mark – I’ve been keen to get that functionality, but only after trying it again and again I’ve realised I was double clicking in the wrong place. I was clicking on the computed styles – which resulted in nothing.

    You can edit the styles taken from the style sheets. So I’ve collapsed the computed styles and am now realising that Safari has it’s own Firebug built in.

    Excellent work – hats of to the WebKit team.

  3. This release is excellent news. The update has been rolled out to 10.4 too, which is good. I’m not digging the Inspector anywhere near much as Firebug though.

  4. @James – sorry, I should have been more clear: Safari also has Drosera which is a fully equipped JavaScript debugger.

    That combined with the Inspector gives you (almost) the same functionality as Firebug. It’s not quite there yet, i.e. it’s missing browser integration and a couple of other bits, but it’s strong move to help developers in the browser.

    If I were totally honest, I guess the same could be said for the IE8 browser.

    I think it all comes down to browser integration.

    Also, I know WebKit is joining in the Google Summer of code, and there’s a nice list of features that look like they may get ticked off for the debugger, including JS profiling.

  5. Sniffing for querySelectorAll shouldn’t be that hard. DOMAssistant has had a working solution for that since it’s 2.6 release and will have even better support in it’s next release and as you say – there is quite a massive boost in performance:

    querySelectorAll and getElementsByClassName is probably the most valuable additions in this 3.1 release – the webkit team has done a really good job!

  6. [...] Safari 3.1 web developer functionality 20 [...]

  7. I was using WebDevAdditions in Safari 2.x and it was a nice piece of plugin.

    But now, SIMBL reports that it is not working along with SafariTidy.

    Is there a replacement for this? Official site at is not online for some time..

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight