Surfin' Safari

Yet another one more thing… a new Web Inspector!

Posted by Timothy Hatcher on Wednesday, June 20th, 2007 at 5:00 pm

As some of you saw last week at WWDC, we have a brand new version of the Web Inspector. We know that a lot people have found the current Web Inspector useful, and we have gotten a lot of feedback and suggestions about how to make it even better. And boy have we been listening! We have taken the current Web Inspector and have added a bunch of new features that you will find invaluable for web development:

  • Completely redesigned interface, no longer a transparent panel
  • Works with any WebView inside third-party applications, not just Safari
  • Supports docking to the inspected page
  • Shows all resources included by the page, sorted into categories
  • Global search through all text-based resources
  • Console to show errors and warnings with live JavaScript evaluation
  • Network panel showing resource load timeline along with HTTP request and response headers
  • Resource size and load time summary graph in the Network panel
  • Syntax highlighted HTML source
  • Inline JavaScript and HTML error reporting

We will be telling you in more detail about all of the great new features in future blog posts.

We have been working on this for a long time, but now we want to get the whole WebKit community involved with making this the best web development tool available. So show up in #webkit or on the mailing list and suggest new ideas or implement them yourself (remember everything is HTML, JavaScript and CSS)!

And there is one more thing… all of this new inspector goodness also works on Windows.

The new inspector is available in the Mac and Windows nightly builds.

New Web Inspector

67 Responses to “Yet another one more thing… a new Web Inspector!”

  1. Matt L Says:

    Nice work guys, that is awesome!

  2. adele Says:

    Hot!

  3. Rosyna Says:

    “Completely redesigned interface, no longer a HUD window”

    I think you mean “transparent panel”.

    Also, the screenshot would have been truly awesome if you were using the Zune theme when you took it. Brown, ftw.

  4. Pingback from Ajax Performance » Leave it to Apple to make web performance sexy:

    [...] Safari just announced a new Web Inspector, and boy, does it sport a sexy network [...]

  5. squareman Says:

    First noting that the size of the columns are not adjustable in the inspector. Also the height of the window when it’s pinned to the document seems unadjustable. Those would be key things to fix.

  6. adele Says:

    @squareman

    Those suggestions sound like they’d make great bug reports: http://webkit.org/quality/reporting.html

  7. Charles Gaudette Says:

    A++ I’ve just been playing with it for a few minutes, but Web Inspector has gone from being a “useful tool” to “changing the way I work”.

  8. Pingback from Safari/WebKit WebInspector » Code Candies:

    [...] Surfin’ Safari wird ein neuer Webinspector für die WebKit nightly builds angekündigt, der mit einer [...]

  9. Pingback from Interesource Blogs: James Higgs: June 2007: Safari's new Web Inspector:

    [...] InspectorPosted by James Higgs on 21 Jun 2007  at 09:59  Tags: Apple, Debugging, Mac, SafariVia Surfin’ Safari, we learn that there’s a new and shiny version of the Web Insepctor for Safari. It’s pretty and [...]

  10. Mitz Pettel Says:

    The new inspector is smarter, prettier and more useful than most actual pages I use it on. Kudos to Adam and Tim!

  11. andrew.hedges Says:

    Is there a way to get this to work with widgets?

  12. Pingback from MACNOTES.DE » Notizen vom 21. Juni 2007:

    [...] WebKit bringt einen neuen Web Inspector. Neu ist unter anderem die Optik und eine Version für Windows.    Tags: 10.4.10, [...]

  13. Pingback from Bram.us » Safari : New Web Inspector:

    [...] The new inspector is available in the Mac and Windows nightly builds. Spread the word! [...]

  14. Pingback from MobileMacs » Blog Archive » Neuer Inspektor in Apples WebKit:

    [...] Leser hier (könntest Du dich bitte melden, dann gibts sowas in Zukunft via Mail), aber seit dieser Nacht enthalten die WebKit Nighlty Releases, also der HTML Teil von Safari einen neuen Inspektor für [...]

  15. Pingback from Webkit catching up with Firefox and Firebug » alexander kirk » Blog Archive:

    [...] The Webkit nightly builds provide the new feature by a right click on the page, selecting “Inspect Element”. For more info, see the blog post on Surfin’ Safari Webkit blog. [...]

  16. serpicolugnut Says:

    Very nice guys! Suddenly, everyone who was complaining about the lack of a Firebug like tool in Safari just got a little quieter.

    It’s incredibly informative and useful, and looks great to boot. I’d also echo squareman’s sentiments – those columns and docked window should be resizable.

    My main question is how would I go about using this in a 3rd party app (as you stated can be done), like in Coda, for example?

  17. Pingback from Things I’ve Learned Through The Years » Blog Archive » New WebKit Web Inspector:

    [...] WebKit team has landed a new Web Inspector in the nightly builds of WebKit. This new, redesigned inspector is a huge leap forward form the [...]

  18. xenon Says:

    @serpicolugnut, you will want to use the following command:

    defaults write com.panic.Coda WebKitDeveloperExtras -bool true

    Then with a build of webkit you can use the run-webkit-app script like:

    run-webkit-app Coda

    You can also use a nightly build with DYLD_FRAMEWORK_PATH.

  19. Bruce Rindahl Says:

    So how do you fire this up on .. er.. um.. Windows?

  20. Pingback from monkinetic | Blog Archive » Safari gets a new Web Inspector!:

    [...] on the Surfin’ Safari blog, it was announced that the webkit nightlies have a new web inspector. This new inspector is vastly improved over the previous web inspector and is actually approaching [...]

  21. ccapeng Says:

    Same question, how do I enable it in windows?
    I have enabled debug menu, but don’t see Inspector.

  22. xenon Says:

    Right click on the page and select Inspect Element.

  23. Pingback from Will’s Web Miscellany » Blog Archive » New Web Inspector:

    [...] This looks useful: As some of you saw last week at WWDC, we have a brand new version of the Web Inspector. We know that a lot people have found the current Web Inspector useful, and we have gotten a lot of feedback and sugestions about how to make it even better. And boy have we been listening! We have taken the current Web Inspector and have added a bunch of new features that you will find invaluable for web development: [...]

  24. nic Says:

    I inspected the Web Inspector. How very meta.

    It’s fantastic, a lot better and easier to understand visually (and navigate) compared to the old one, but I think I need a bigger or another screen. It feels very cramped on my PowerBook (12″).

  25. Mike.Hotaling Says:

    When you said you could inspect in ANY app, I didn’t know that you meant even within the inspector itself! That was a little weird.

  26. Pingback from Ajaxian » New Safari / WebKit Inspector:

    [...] WebKit team announced a new version of the Web inspector that [...]

  27. Pingback from mindtangle » Blog Archive » New Web Inspector for Webkit Browers:

    [...] don’t use Safari, but I do need to test it. Looks like the Webkit project has developed an inspector that rivals Firebug, for Webkit-based browsers. It sure is [...]

  28. Chriha Says:

    Doesn’t work with Vista. Everytime I try to run the .cmd file, safari crashes …

  29. Pingback from Red Sweater Blog - WebKit’s New Element Inspector:

    [...] team is picking up on Steve Jobs’s “one more thing” habit, announcing yesterday a new HTML element inspector, built-in to the latest WebKit nightly [...]

  30. Pingback from Ajax Girl » Blog Archive » New Safari / WebKit Inspector:

    [...] WebKit team announced a new version of the Web inspector that [...]

  31. Pingback from The Shape of Days: Firebug is dead to me:

    [...] Have you seen this? [...]

  32. Pingback from evølutiøn-515.net » Blog Archive » Safari in Deutschland: WebKit jetzt auch für Windows!:

    [...] ja, einen WebInspector gibt es mittlerweile auch für WebKit, schon vor dem Start des Browsers. Microsoft hat [...]

  33. whoughton Says:

    Are the debugging options available compatible with Firebug (e.g. can we use one set of debug code now across both browsers)?

  34. Pingback from WebKit Announced New Web Inspector » D’ Technology Weblog: Technology News & Reviews:

    [...] WebKit [...]

  35. coolfactor Says:

    I just downloaded the latest Mac build, but it didn’t have the new Inspector. I found that kinda strange. I’ll try again.

  36. Pingback from WebKit integrá un nuevo inspector Web | aNieto2K:

    [...] anuncia que integrará una nueva herramienta para ayudarnos a desarrollar nuestras webs, un Inspector Web. Al igual que Firebug integra un sistema de medición de respuesta de las peticiones que hace el [...]

  37. Pingback from Links for Thu 21 Jun 2007 | Joseph Scott's Blog:

    [...] Surfinâ Safari – Blog Archive » Yet another one more thing… a new Web Ins… – This looks nice. Kind of like Firebug, only for Safari and with pretty graphics. I tried the nightly build that is supposed to have this, but was unable to find it in the Windows version. Tags: apple webkit webinspector safari [...]

  38. Pingback from ansemond.com » Blog Archive » IPhone apps: they weren’t kidding:

    [...] new WebKit inspector may be the demonstration vehicle that convinced Apple that AJAX UIs could work, despite many [...]

  39. Pingback from error is the mother of all inventions:

    [...] Internet, ajax, design, web, Technology WebKit framework now sports a completely new Web Inspector >> No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI [...]

  40. Pingback from Blogg: Ny webbinspekterare för Safari | digital venues.:

    [...] senaste nightly build har en ny praktisk inspekterare. Godis för oss webbutvecklare och ett utmärkt alternativ till [...]

  41. skyfex Says:

    I love the new inspector, but I found the old inspector useful for certain purposes. The new one requires so much space, while the old one was light and neat.. On my laptop the old one would be more efficient for many smaller tasks. I want the old one back, maybe as a “Quick Inspect” or something..

  42. Pingback from tijs.org » Blog Archive » links for 2007-06-22:

    [...] Surfin’ Safari – Blog Archive » Yet another one more thing… a new Web Inspector! handy resource viewer and more (tags: webkit webinspector debugging tools programming resources) [...]

  43. Pingback from New Webkit Inspector : David Paul Robinson:

    [...] new Webkit Inspector is super-duper [...]

  44. Pingback from Web Inspector en Safari : planetamac:

    [...] Surfin’ Safari  fresqui |  menéame | permalink | trackback url volver [...]

  45. Pingback from Webkit e il nuovo Web Inspector:

    [...] Sul sito ufficiale di WebKit ci giunge una lieta notizia: Web Inspector è giunto alla seconda versione! [...]

  46. Pingback from Sylvain v2.0 » Safari s'offre un nouvel inspecteur:

    [...] Posted in Développement, Applications by Sylvain on the juin 22nd, 2007 Tiens tiens, voici un nouvel inspecteur dans le build quotidien de [...]

  47. Trackback from IT-News from Future already today:

    WebKit Nightly Builds für Windows verfügbar…

    WebKit Nightly Builds für Windows verfügbar
    Nach der Veröffentlichung von Safari 3 stehen Windows-Nutzern nun auch die Entwicklerversionen zur Verfügung
    Wie im Surfin’ Safari-Blog angekündigt stehen die tagesaktuellen Web…

  48. Pingback from Weblogger.ch » Blog Archive » links for 2007-06-23:

    [...] Surfin’ Safari – Blog Archive » Yet another one more thing… a new Web Inspector! (tags: web safari extension javascript debugger) [...]

  49. zapradical Says:

    so… is there a way i can get this on my system to inspect pages in safari without having to install webkit?

  50. adele Says:

    @ zapradical

    The only way to try out the new Web Inspector right now is download a WebKit nightly build. Running a nightly build doesn’t actually replace anything on your system, so there’s nothing that really gets installed.

  51. Pingback from The Lair / webskit:

    [...] Webkit Nightly Download site. Another great reason to run a nightly build instead of the beta – a new web inspector which looks very tasty [...]

  52. Pingback from Safari Web Inspector for Windows | position: absolute:

    [...] Keynote. The bit that’s really going to be interesting for web developers, however, is that Safari will come along with a new version of Web Inspector, which is basically the Safari counterpart to Firefox’s excellent Web Developer and Firebug [...]

  53. Pingback from prototypecreative.com » links for 2007-06-25:

    [...] Surfin’ Safari – Blog Archive » Yet another one more thing… a new Web Inspector! “Works with any WebView inside third-party applications, not just Safari” (tags: safari webkit webdev) This entry was written by sxtxixtxcxh and posted on June 25, 2007 at 12:25 pm and filed under noteworthy. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2007-06-24 [...]

  54. Pingback from mcdave.net » links for 2007-06-26:

    [...] Surfin’ Safari – Blog Archive » Yet another one more thing… a new Web Inspector! (tags: safari webkit development tools webdev debugging) [...]

  55. Pingback from On Deciding . . . Better 3.0 :: 9 Reasons Not To Switch Back To Safari from Firefox:

    [...] keep coming back to Safari for one reason. On the Mac, there is the new Inspector for webkit.  It allows you to browse styles while displaying the page. Select text and the synthesized CSS [...]

  56. Pingback from Max Design - standards based web design, development and training » Some links for light reading (26/6/07):

    [...] Yet another one more thing… a new Web Inspector! [...]

  57. Pingback from The Omni Mouth » OmniWeb 5.6 Sneaky Peeks are now available!:

    [...] OmniWeb, we let you sit in the corner for a little too long, sorry about that. The fine folks at WebKit.org have been doing some amazing work and we thought you might like to play with it. Come out of the [...]

  58. mazdak_rezvani Says:

    This is a great tool One very important thing missing from it though:

    The ability to change values (like Firebug in Firefox)

    When I click on a CSS value, I’d like to be able to play around with it to see how it affects the page. It would be even nicer to have the CSS file display editable.

    Thanks for the great tool though.

  59. cyrilgodefroy Says:

    This Inspector is wonderful. I am writing an ebook on web site optimization (client-side) and the lack of such a tool for safari was really a disappointment for me (as Safari is my primary browser).

    I have small requests/comments on the network view after using it for only a small amount of time :
    - the size of the request fo each item is lacking, and the ‘cookie’ header too. I ‘ve come accross several web sites where cookie size and requests sizes are huge and a real performance issue. The inspector should help showing this.
    - the url of the request should be added : resources typically come from different servers. why
    - the page view hides the fact that you can go through several redirections (302) between pages. Maybe the redirections could be recorded and the page cleaned up on a click event?

    Otherwise, I love the css/html/images/javascripts breakup. It is a gem in the gem. Summarizes superbly a page so that even the guys at marketing can understand it.

    PS: : please send info on the inspector to the guys building the apple startpage (they coul save some bandwidth etc/…)

  60. Pingback from Inspekce u Safari » Poznámky pro později:

    [...] že se zamiloval: nový Web Inspector v Safari. Na blogu vývojářů Safari jakýsi xenon napsal o novinkách a já [...]

  61. Pingback from Safari on Windows:

    [...] and the Web Developer extension just make it the perfect platform for development. However, the new Web Inspector in Safari 3 looks like it might be offering some strong competition for the hearts and minds of [...]

  62. Pingback from Presseschau für Webentwickler - Ausgabe Juli 2007 | Dr. Web Weblog:

    [...] auf Patches von Apple einstellen; nun ist der Browser in ordentlicher Form verfügbar. Ein neuer Web Inspector für Safari (Win und Mac) steht auch zum Download [...]

  63. Pingback from Ejecutive » Safari vs Mozilla:

    [...] with Firebug, this combination of free software has saved me countless hours, although Safari has something similar, they’ve yet to implement live CSS and HTML editing, which is invaluable when you’re [...]

  64. Pingback from What’s in Leopard for Designers (2): WebKit & Safari « counternotions:

    [...] a page out of popular Firefox plug-ins, Safari now offers an expanded WebKit Inspector, a sophisticated tool to navigate and debug web app [...]

  65. Pingback from Surfin’ Safari - Blog Archive » Ten New Things in WebKit 3:

    [...] [...]

  66. Pingback from JavaScript ベンチマーク SunSpider 0.9 - METAREAL:

    [...] や Web Inspector などの Web 開発者向けツールも提供してきたが、今度は JavaScript [...]

  67. countZZero Says:

    Does this incorporate FTP/SFTP?

    Just curious…
    Karl A. Shalek
    http://www.fastercats.com