Web Inspector for Safari on Windows

If you've downloaded Safari for Windows and are a looking for a tool similar to Firebug or Nikhil's Web Development Helper, then you might be interested in the WebKit Open Source Project. Within the project is a tool call Web Inspector that performs much of the same tasks as the tools mentioned earlier. To run the tool:

1) Download the nightly build from http://nightly.webkit.org/.

2) Extract the contents from the zip file.

3) If you are running Vista then you will have to add the following to the end of the Preferences.plist file (under C:\Users\<UserName>\AppData\Roaming\Apple Computer\Safari\), just before </dict></plist>: 

          <key>WebKitUserStyleSheetLocationPreferenceKey</key> <true/>

4)  Execute the run-nightly-webkit.cmd file. This will launch Safari from the command prompt.

After Safari is launched you will have an additional item in the context menu called 'Inspect Element', select this to see the tool:

 Here are a few screenshots of it in action:

 

37 Comments

  • I installed this on the Mac to try and diagnose a problem we're having with the release AJAX framework, and to my surprise, the problem goes away while Webkit is running with Safari. Not a very good testing tool if it alters the way the browser works!

  • Jeff,
    Agreed! I don't like the hoops you have to jump through to get it to run either. Right now I think it's a good tool for inspecting the DOM and viewing network statistics - it's no Firebug.
    -david

  • Thanks for the information. I downloaded the latest webkit nightly yesterday but couldn't get the Inspector to work, so it's good to know that it's a known issue.

  • For those of us who have upgraded to 3.0.4 you have to edit a WebKitPreferences.plist file the safari folder. Then, add this string at the bottom before the :

    WebKitDeveloperExtras


    Hopes this saves at least a few hours of search for someone looking to use this Awesome tool!

  • still not working on xp with safari 3.0.4 and WebKit-r27929.

  • a small correction: you'll have to add following line in WebKitPreferences.plist and NOT in Preferences.plist:
    WebKitDeveloperExtras


    it works in a recent build WebKit r27953

  • Wow!!! finally got it to work on XP.

  • Ok so how do you guys get this working on XP?

  • Thanks for the tip Zach

  • I was unable to get this working on Windows XP (with today's nightly Safari-for-Windows build) until adding matas's WebKitPreferences.plist update (above), but now it works fairly well. This has already been immensely helpful tracking down some very weird CSS artifacts I've been getting specifically in Safari v2 and v3. Thanks!

  • just thought I would let you guys know that once you have the Inspector working, you can actually use it to inspect the Inspector. At least on the windows version so far. Neato!

  • Hi. I have downloaded WebKit-SVN-r31446.zip. I extracted it to desktop and ran the .cmd file, but nothing happens. I added the 2 lines

    WebKitUserStyleSheetLocationPreferenceKey
    WebKitDeveloperExtras

    But nothing happens for all.

    Can someone please help explain how to deploy Web Inspector in XP Professional?

    Thanks!

  • On Vista the mask that is suppose to highlight the selected element in the browser overlaps the inspector. On xp I only get this issue breafly when tabbing between the browser and the inspector.
    It's deffinatly no firebug, but it is helpfull for tracking css and loging errors.
    I also find it very anoying that images that change on hover gets listed as a network hit even though no network trafic is preformed. This also screws up the size of the bars on the time line.

  • I have downloaded WebKit-SVN-r24872.zip file for windows server 2003, i have run the .cmd file, but i am not getting the inspect element in the safari. Even then, i have checked for WebKitPreferences.plist to update, but i didnt find anywhere

  • hallo i just downloaded latest build r35803
    on on safari 3.1.2 and got into the prefrences file and changed the line
    but still it does not work on windows xp.

    any new ideas? pleas help

  • Thanks a bunch, you saved me lots of time :)

    Mike

  • Thanks Gary! It works!

  • i dont have any WebKitPreferences.plist file or Preferences.plist i have Defaults.plist in D:\Program Files\Safari\Safari.resources folder
    can anyone help me out

  • Trying to do this w/ Safari 4 Public Beta and no luck finding that WebKitPreferences.plist file anywhere under C:\Documents and Settings\mkriskovic\Application Data\Apple Computer\Safari. Is Safari 4 supported???

    Thanks,
    ~Michael

  • Thanks guys :D this one hellped me a lot and thanks for the tips on how to work on 3+

  • Hi I found the com.apple.Safari.plist file in C:\Documents and Settings\\Application Data\Apple Computer\Preferences

    but its not clear text. I tried opening it in notepad and notepad++ but it would show only garbage values

  • for Safari 4.0 Windows you can search for the defaults.plist in the Program files\Safari\Safari.resources folder and follow the same thing as mentioned above.

    It worked for me.

  • Thanks Gray M.
    You saved lot of time. Great

  • Just added the fix from 12:02 on my Win Safari 4.03 and worked like a charm. Thanks a ton.

    Also I get this new welcome screen when i start Safari. Cool.

  • Just add WebKitDeveloperExtras before the last
    to C:\Program Files\Safari\Safari.resources\Defaults.plist

    Cheers

  • .....WHAT!!!!
    no all of us have the time or knowledge, perhaps neither the interest to be programming savvy, no offence intended.
    Why should be a tool so difficult to install, why not explains things to me and other 'normal' people in a friendly and non-technical manner, why doe s not the program install itself?
    I will be sticking to the tools that treat me like a person (guess lot more people will be doing the same)

  • web inpsector is really good and makes web designing a lot easier.thnx for how to use it.

  • Hey ,
    just downloaded the webkit but i cannot find run-nightly-webkit.cmd anywhere
    any ideas where it is?

  • crippletoe, this is an old post, so just check 'Preferences' -> 'Advanced' -> 'Show develop menu in menu bar' checkbox.
    You'll find the 'Develop' link one of the menues at the top-right corner.

  • Last reply was awesome thanks a lot guys

  • 'Preferences' -> 'Advanced' -> 'Show develop menu in menu bar' checkbox.

    You'll find the 'Develop' link one of the menues at the top-right corner.

    Thanks for this comment...

  • Thanks Simbu for your hint! I was short to give up... :-)

    Thanks and greets,
    Matthias

  • Ok - maybe this is strange question - where TO extract this files ?

  • It's similar to firebug; work fine. I add to my tools,
    thx.

  • Works perfect well installed it, and just wanted to say thanks.

  • Don't appear installed!
    Nothing in Advanced.
    I have modify Defaults.plist under Safari.resources adding
    WebKitUserStyleSheetLocationPreferenceKey

    before
    I have run run-nightly-webkit.cmd file from Windows command prompt.
    I have done double click on WebKit.exe this lunch Safari but not Web Inspector.
    My installation:
    OS: Windows Vista Home Premium
    Safari 5.1

    You can provide step by step installation to me?
    info@agpromozioni.it

  • Edit > Preferences > Advanced
    Select “Show Develop menu in menu bar”

    that's it...

Comments have been disabled for this content.