You won’t find access to Web Inspector in your default installation of Safari. However, making the necessary configuration changes is as easy as running the following command from a Terminal:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

If you prefer, you can use the Property List Editor to set the WebKitDeveloperExtras property in the Safari property file, which is located here: ~/Library/Preferences/com.apple.Safai.plist (use Finder to locate the file and double click to open). You’ll need to restart Safari after making the changes to enable Web Inspector.

To open the Web Inspector, right click and choose Inspect Element as shown in the figure below:

With Web Inspector running, you have access to a goodly amount of information. Take a look at the screenshot below which shows content from the Google homepage.

While poking around on Web Inspector, I clicked on icon in the lower left corner (the little arrow-in-a-box) and a popup menu appeared showing options for Network and Console. I selected Network and information about document and image transfers appeared (see the figure below). The Console option in this same menu resulted in a blank page appearing, so it seems I still have some exploring to do to figure what this option is all about. If you click on the icon just to the right of the arrow-in-a-box, the Web Inspector will be shown in a split window view versus a popup window.

I haven’t found an option for editing “on-the-fly” as in Firebug, however, Web Inspector is a good start for a built in tool and I have no doubt it will continue to evolve….

You can get there from here on a Mac, albeit with a different approach as to the internal implementation.

When copying a portion of a webpage in Safari, and pasting the result into a TextEdit document (both native applications on Mac OX S), formating and content are transferred to the document. Let’s look at an example. The image below is a screenshot of text that I copied from a previous post on this blog using Firefox, and pasted into TextEdit.

Now, if I copy that same information from within Safari and paste the results into TextEdit, things look altogether different, as shown in the figure below.

The magic behind this is a file type known as RTFD (Rich Text Format Directory).

If I save the file shown above with the name test, TextEdit will create an RTFD document. I am using the term document loosely, and you’ll see why that is momentarily.

In the image below are two lines from Finder, the first is an empty folder, the second is the RTFD file test that was saved from within TextEdit.

What’s interesting about the RTFD file format is that there is a directory created which will have a document with the formatted text (an RTF file) and other content such as such as images will also live within this directory. The reason I created the test-folder was to show the difference between how a typical directory appears in Finder (with the folder icon and directional arrow) and how an RTFD file appears as simply another file. However, from within a Terminal, if you look at the test.rtfd file, it’s obvious this entry is actually a directory. See the figure below.

The file TXT.rtf is the RTF file that contains the rich text formatting for the webpage that was extracted from Safari and MacPorts.jpg is the image file downloaded during the copy/paste. A partial listing of the RTF file is shown below to give you an idea of the content in this short example.

You can view the contents of an RTFD file without having to resort to Terminal. From within Finder, right click on an RTFD file and choose Show Package Contents. This will open a new Finder window as shown below, listing the contents of the RTFD directory.

There it is, the secret behind copying and pasting web content on a Mac and bringing the formatting and content along for the ride.