A week ago I bought my first Mac – a MacBook Pro – and I really think that this was a very good decision. It takes some time to get used to the different GUI and also to different shortcuts, for example I’m still not used to the Apple key, but that is most certainly just matter of time.
But as I do some web development from time to time, I was at first a bit disappointed when I searched for some Safari plugins that support web development. I used some firefox plugins to analyze the DOM and CSS and I really wanted the same in Safari. There is a list of interesting plugins for Safari, but I wasn’t satisfied until I found the Web Inspector. Absolutely straightforward to use and really useful. Exactly what I was looking for.
Here a quick overview about the main features:
- View the DOM hierarchy with folded nodes.
This gives you a good overview about the structure and whenever you select a node, it is highlighted in the actual web site. - Analyze the CSS for each node.
You can see the CSS as defined in the style-sheet but also the actually applied style, which combines browser defaults, inherited CSS and the explicitly defined CSS. - See all scripts, style-sheets, images or other media that is used for this page
- And quite a lot more….
If you are interested in web design and you are using Safari, this is really a must.