There’s an easy way to get firebug-like tools in Safari. From the terminal, run
Now you can examine html and css for the page you’re on similar to how you would with firebug. Position your mouse pointer over an element you want to look at. Right-click –> Inspect Element. Up pops a console, with the HTML for the element you were hovering over. CSS for that element is to the right of the HTML. **To edit the css, you have to edit the properties and values for the html element below the “Computed Styles”. Editing the computed styles does nothing. Below the computed styles should be the element you want.
Double click to access the property and it’s values.
To add a new property, double click an existing property and add a semi-colon after it. Then add your new rule.
While you’re still in the current attribute (cursor is blinking), see your CSS take effect by pressing enter or click outside of the current property/value in order to save your edits.
There is an additional menu to go along with other features too. Expose this menu by going to Preferences -> Advanced -> Check the box “Show Develop Menu in Menu Bar”.
Here are some of the other dev features apple has added to Safari, http://www.apple.com/safari/features.html#developer
