Browser Tools for Web Developers

Here are links to the browser tools I’ve mentioned in a few classes:

• Safari has a dedicated Developer menu that you can turn on. Go to Safari > Preferences > Advanced and check “Show Develop menu in menu bar”. Now you can use the Develop menu to turn stylesheets off, show the Web Inspector, etc. You can also right-click a particular element on a web page and choose “Inspect This” to see that area of code and the styles that are being applied to it. (This “Web Inspector” is active by default in Chrome).
• The excellent Web Developer Toolbar does similar tricks and more, allowing you to outline elements, view a page’s CSS, etc. It’s available for Firefox and Chrome and gets installed as an extra toolbar — in Firefox it’s a big toolbar with icons, but with Chrome it’s a subtle Gear icon off to the right of your address bar.