Safari helps CSS noobs and real web developers with developer tools
I’m going to go out on a limb and guess that much of the planet already knew about the developer tools in Safari. I’m positive I’m last in line for this valuable information, but in case I’m not I want to spread the word to the rest of the uninitiated.
The other day I was completely stressed out about a blog redesign. Why? Because I’m not a designer, I am a writer, speaker and teacher. Design is not something that comes naturally to me, and it is certainly not something I am formally trained to do.
Like many others trying to work within a budget, I slave away at CSS and PHP, taking hours to do what a professional could do in half the time (if not less). All the while I fantasize about the day when I’ve saved enough filthy lucre to pay someone to do the hard work of a redesign for me.
One such professional saw my distress at a coffee shop recently and clued me in on what I’d been missing in Safari: developer tools. That’s right, he took five minutes to give me a quick tutorial in a coffee shop that then saved me hours of frustration. It also probably saved the ears of fellow coffee shop patrons from what was sure to be a stream of blue-tinged expletives that would have lasted for hours.
How do you access this magical land of developer tools in Safari? Simply go to the tool bar and select File -> Preferences -> Advanced and click the box that says “Show Develop menu in menu bar” to get started. Then restart Safari. There will be a new selection in your tool bar called Develop. Under this menu, toggle Cache, Images, Styles, JavaScript, JavaScript Timer and Site Specific Hacks to “enabled”.
Now you can go to the site you wish to change or update and use Safari to find out what you need to change to get the look you want, and how it will look before you commit. It won’t save the work – you still need to make the actual changes in Dreamweaver, CSSEdit, TextEdit or the software of your choice – but it will help you navigate reams of code and give you a preview. It’s quite a time saver.
To get the information on what you want to change, hold down the Control key while you right click on the element (how to right click on a Mac is a subject for another post, but yes, it is possible and no, I don’t know why they don’t just make a two button mouse for you). This will bring up a pop up menu, under which you should choose the option to “Inspect Element”. This will highlight the element you want to change, like the title of a post on a blog, and call up a new window showing all of the behind the scenes information on the element, like the CSS style sheet information, the location of the code and more.
If you make a change you can then preview it in the Safari window before you commit. If you like what you see, go to your CSS editor of choice and make the change, then save and upload the file. By being able to see my changes on the fly and get the exact code information for the style sheet, I saved hours of work. So, to all of you who already knew about this hidden secret of Safari and are railing at me for sharing it as if it were new, why didn’t you tell us sooner? And to the rest of you who were in the dark like me, I hope the tip helps save you as much time and grief as it has saved me. Now if Safari would just get Tab Mix Plus, Stumble Upon toolbar and Foxy Tunes I could make the permanent switch to full time use.
Related Posts:
August 15th, 2008
Well.. All Macs do have two buttons, from the day they give Mighty Mouse with machine.
Not to confuse n00bies, they decided to disable it initially but Mighty have as much as four buttons, configurable in Preference Panes.