Mac Safari's cool new Inspector

Mac Safari's cool new Inspector

Summary: As a reluctant web page developer on StorageMojo and for friends, I often wonder how a page I like is done. With Safari's cool new Inspector I don't have to wonder any more.

SHARE:

As a reluctant web page developer on StorageMojo and for friends, I often wonder how a page I like is done. With Safari's cool new Inspector I don't have to wonder any more.

Here's is what the Inspector looks like:

safari_inspector1.jpg

It makes it easy to pick out the CSS, documents and other components of a page. Check the "Show implicit properties" box for even more data on the page.

A quick tour This shows the Inspector as an independent window, but if you click 2nd from the left icon at the bottom of the window it will show up at the bottom of the Safari window. Click on "body" and the body code will appear, highlighted.

Enabling the Inspector functionality requires a quick trip to the Terminal (located in your Utilities folder). At the prompt enter defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Restart Safari, right click on a web page and you'll see a new "Inspect Element" option.

Comments welcome, as always. Firefox's Firebug add-on is an option for devoted FF users.

Topics: Operating Systems, Apple, Browser, Hardware, Software Development

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

7 comments
Log in or register to join the discussion
  • IE7 has a great tool too

    [url=http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en] IE Developer Toolbar [/url]

    It's even made by Microsoft so that is a bonus.
    NonZealot
    • Your a Tool using a MS Tool

      Sounds like another vector for exploits that has made MS famous the world over.

      ;)

      ;) *snicker*hack*cough*smirk*smirk*snicker*lol*burb ;)

      ;)
      NoPumpGas
  • Firefox->Tools->DOM Inspector

    nt
    D T Schmitz
  • Firefox->Tools->Web Developer

    Oh that's right, you have to install the Web Developer extension first from https://addons.mozilla.org/en-US/firefox/addon/60
    I'm going to check out Firebug, and the Safari one too. It's always better to have multiple routes to a solution.
    brilang
  • It should be noted Apple forked KHTML for Safari

    Apple worked on development in-house of revamped KHTML for about a year and then forked under LGPL their changes to WebCore and WebKit.

    The differences between KHTML and the Apple fork are significant and regarded beneficial to the extent that Qt-WebKit will most likely replace KHTML in KDE 4.1!

    Konqueror, the KDE 3.5.7-integrated browser relies on KHTML.
    D T Schmitz
  • RE: Mac Safari's cool new Inspector

    Better yet, just do:

    defaults write com.apple.Safari includeDebugMenu -
    bool true

    That will give you the debug menu that did all the
    things everyone else mentioned here all along AND
    turn on the inspector. The debug menu is too
    extensive to detail here....
    ebernet
  • Very neat feature

    This looks like a very neat and useful feature indeed, I have executed that terminal command to enable the feature on my mac. I'd give a thumbs up for Apple enabling this command by default.

    - John Musbach
    John Musbach