For a while now I have been using Firebug for Firefox, but I always wished I could get Safari Firebug too. I would switch to Firebug whenever I wanted to look at the CSS of a website which was always a bit of a pain. What I didn’t know was that all the time Safari had something very similar to Firebug built in I just needed to activate it.
In Safari go into your preferences and under the advanced tab you will see an option to click a check box for show develop menu in menu bar.
Then when you are using safari go to the top menu which says develop and scroll down to web inspector.
Just as with Firebug the web inspector panel will appear at the bottom of your Safari browser. Use the magnifying glass icon to select elements and view its HTML and CSS.
If you still want to stick with firebug I have also just found out that Firebug Lite will work with Safari though I haven’t tried this out.
Twitter
RSS
Facebook
7 Comments
I did not know that this was built in to Safari either! Thanks for pointing this out as I use Firefox for the tools you can add but do prefer using Safari so this should be most useful.
Great Post, I always need to use a Firebug or something similar in Safari!! This will make my life a lot easier!!
Thanks!!
With Apple’s release of the Safari Extensions Gallery we should see key web design and developer tools showcased and find they becoming more easily accessible. I tend to load extensions in Firefox (which has become very slow) and Chrome but I may start using Safari more now.
Your post is very much appreciated.. I use firebug mostly on firefox to enhance my code editing. Now I can use safari on Mac while editing, thank you!
Nice tip – now I can go back to using safari! I had moved to chrome as my source viewing browser, because Firefox and Firebug, were getting progressively slower.
It’s really useful to see the element on the page highlighted when you scroll over the applicable code.
I had no idea this feature was available in Safari. The built in inspector in Chrome works really well also. Just right click on the page element and select ‘Inspect Element’ from the contextual menu. It’s really detailed and has a great navigational interface.
Thanks!!! Very helpful in sorting out a browser incompatibility issue.