Safari 6 revert to WebKit Web Inspector

When Mountain Lion and Safari 6 were released most Web-developers I know complained about the new Web Inspector, which is updated to resemble Xcode a bit more. The people complained and soon other people suggested to use Chrome or the Nightly WebKit build instead, because it still provides the WebKit Web Inspector.

These are all valid options but it doesn't feel the same. I remembered that the Web Inspector itself was written using HTML/CSS/JavaScript so I started to think, could I not simply replace the source files for the Web Inspector? After just a few minutes of playing around I found a way to get Safari to use the WebKit Web Inspector.

In fact, it is an updated version of the WebKit Web Inspector which has some awesome new features (and provides a secret Settings menu which has a few neat things as well) while remaining the old look and feel we've all grown to know and love.

Note Before doing this close Safari, and remember to create backups for everything!

Instructions

I can't guarantee the inspector will function 100% but first impressions are it works good enough to do my job.

Download the Nightly WebKit (http://nightly.webkit.org)
Right-click on WebKit and choose Show Package Contents
Navigate to ./Contents/Frameworks/10.x/WebCore.framework/Versions/Current/Resources/ and you will find a folder called inspector. This contains the HTML/CSS/JavaScript for the Web Inspector, awesome! Keep this Finder window open!
Open a new Finder window and navigate to /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources. This is where the 'new' Web Inspector is located.

10.7 Lion user? The location of this directory for you is /System/Library/StagedFrameworks/Safari/WebInspector.framework/Versions/Current/Resources/.

Now copy the contents from the WebKit Web Inspector folder (from Step 3.) to the new Safari Web Inspector folder from Step 4. Do not remove anything, but when it prompts to 'keep newer' files press the Replace button.
Now there is only one thing left to do, remove of rename the Main.html file (this is the main frame for the new Web Inspector) and rename inspector.html to Main.html.
Start Safari.app and test it out. It should be back!

Hopefully this worked for you the same it did for me and my friends, enjoy!

Updating OS X / Safari

This might break with Mac OS X and/or Safari updates but I'm guessing that, at least for the time being, this will keep working.

Known Issues

Sources tab doesn't appear to load.
Bottom controls don't seem to update for a tab so sometimes the bottom controls are missing (Timeline, Network)

Fix: Broken bottom controls

I'm not sure why this happens, but it is fixable by editing the inspector.css file. Just 1 line needs to be removed/commented out (in my version it's around line #2589):

#bottom-status-bar-container {
    -webkit-flex: 1 1 0;
    /*width: 0; REMOVE THIS WIDTH 0 */
    overflow: hidden;
}

Fix: Sources tab doesn't load

I don't know all the details, but something that the WebKit Inspector uses doesn't work in new Safari 6 because it's not available. But it looks like this isn't actually necessary for it to work, it probably just improves the way Debugging scripts works - I don't know, however with this fix you can enable the Sources tab and it looks like it should be working (maybe not fully, but better than nothing?)

Open ScriptsPanel.js and remove or comment out the following code (starts around line #5431 for me)

if (InspectorFrontendHost.canInspectWorkers() && !WebInspector.WorkerManager.isWorkerFrontend()) {
    WorkerAgent.enable();
    this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane(WebInspector.workerManager);
}

When applying fixes make sure Safari is closed or at least restart Safari for it to work.