Lots of web designers rely on Chris Pedrick’s Web Developer extension for Firefox. It’s one of many reasons Firefox is such a popular browser for web development. I’ve used this Firefox every week for years. We covered this in a tip back in 2006:
Archive Tip: Great Web Developer extension for Firefox.
So you may appreciate my happiness at discovering the greatly improved web inspector Apple has built into the new Safari 4 beta. Apple’s marketing claims this is the best set of development tools ever included in a browser. As I get to know Safari 4 better, I’m inclined to agree.
Download the Safari 4 Beta.
You can download the Safari 4 Beta directly from Apple. It comes in both Mac and PC formats.
Safari 4: Show Developer Menu.
To access Safari’s web developer tool, goto the Advanced section of Safari’s preferences dialog, and turn on the checkbox for “Show Developer menu in menu bar.”
Safari 4: Inspect Element command.
Right-click (or Control-click) on something in Safari 4 and choose “Inspect Element.” The web inspector panel will slide up from the bottom of your browser revealing a plethora of valuable details. Automatically highlighting the appropriate section of HTML code, and providing easy access to CSS styles.
I ran into this feature while right-clicking (or control-clicking) on a graphic in a web page, and noticed the “Inspect Element” option at the bottom of the pop-up menu.
Safari 4: Resources Tab
The Resources tab in the web inspector provides wonderful feedback about the load speed of your page and the sizes of all the graphic and media elements on your page.
My favorite trick? Click on any element in the list and get immediate and quick access to the original graphic. Very hand for getting access to images that are referenced in CSS.
Source: I turned on Safari’s developer tools several weeks ago while writing our tip on Previewing iPhone Websites in Safari. I ran into the upgraded web inspector somewhat accidentally when I noticed a new "Inspect Element" in a pop-up menu while I was Control-clicking on a graphic.
