Surfin' Safari

<< Safari Beta 3.0.1 for Windows
Safari on Windows Keyboard and Mouse Shortcuts >>
 

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.

spacer

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

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

  1. Matt L Says:
    June 20th, 2007 at 6:48 pm

    Nice work guys, that is awesome!

  2. adele Says:
    June 20th, 2007 at 6:56 pm

    Hot!

  3. Rosyna Says:
    June 20th, 2007 at 7:24 pm

    “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:
    June 20th, 2007 at 7:35 pm

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

  5. squareman Says:
    June 20th, 2007 at 10:53 pm

    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:
    June 20th, 2007 at 11:34 pm

    @squareman

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

  7. Charles Gaudette Says:
    June 21st, 2007 at 12:03 am

    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:
    June 21st, 2007 at 12:16 am

    [...] 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:
    June 21st, 2007 at 2:12 am

    [...] 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:
    June 21st, 2007 at 3:22 am

    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:
    June 21st, 2007 at 4:04 am

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

  12. Pingback from MACNOTES.DE » Notizen vom 21. Juni 2007:
    June 21st, 2007 at 4:18 am

    [...] 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:
    June 21st, 2007 at 4:21 am

    [...] 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:
    June 21st, 2007 at 4:46 am

    [...] 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:
    June 21st, 2007 at 5:56 am

    [...] 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:
    June 21st, 2007 at 6:01 am

    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:
    June 21st, 2007 at 6:13 am

    [...] 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:
    June 21st, 2007 at 7:42 am

    @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:
    June 21st, 2007 at 8:08 am

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

  20. Pingback from monkinetic | Blog Archive » Safari gets a new Web Inspector!:
    June 21st, 2007 at 8:38 am

    [...] 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:
    June 21st, 2007 at 9:12 am

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

  22. xenon Says:
    June 21st, 2007 at 9:15 am

    Right click on the page and select Inspect Element.

  23. Pingback from Will’s Web Miscellany » Blog Archive » New Web Inspector:
    June 21st, 2007 at 9:44 am

    [...] 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:
    June 21st, 2007 at 9:50 am

    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:
    June 21st, 2007 at 10:02 am

    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:
    June 21st, 2007 at 10:28 am

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

  27. Pingback from mindtangle » Blog Archive » New Web Inspector for Webkit Browers:
    June 21st, 2007 at 11:31 am

    [...] 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:
    June 21st, 2007 at 11:33 am

    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:
    June 21st, 2007 at 11:57 am

    [...] 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:
    June 21st, 2007 at 11:58 am

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

  31. Pingback from The Shape of Days: Firebug is dead to me:
    June 21st, 2007 at 1:14 pm

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

  32. Pingback from evølutiøn-515.net » Blog Archive » Safari in Deutschland: WebKit jetzt auch für Windows!:
    June 21st, 2007 at 1:33 pm

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

  33. whoughton Says:
    June 21st, 2007 at 1:34 pm

    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:
    June 21st, 2007 at 2:01 pm

    [...] WebKit [...]

  35. coolfactor Says:
    June 21st, 2007 at 3:57 pm

    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:
    June 21st, 2007 at 4:42 pm

    [...] 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:
    June 21st, 2007 at 5:30 pm

    [...] 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:
    June 21st, 2007 at 9:48 pm

    [...] 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:
    June 21st, 2007 at 11:24 pm

    [...] 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.:
    June 22nd, 2007 at 12:16 am

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

  41. skyfex Says:
    June 22nd, 2007 at 1:40 am

    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:
    June 22nd, 2007 at 1:42 am

    [...] 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:
    June 22nd, 2007 at 4:08 am

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

  44. Pingback from Web Inspector en Safari : planetamac:
    June 22nd, 2007 at 4:19 am

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

  45. Pingback from Webkit e il nuovo Web Inspector:
    June 22nd, 2007 at 6:22 am

    [...] 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:
    June 22nd, 2007 at 9:51 am

    [...] 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:
    June 22nd, 2007 at 11:44 am

    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:
    June 23rd, 2007 at 1:25 am

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

  49. zapradical Says:
    June 23rd, 2007 at 6:19 am

    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:
    June 24th, 2007 at 12:29 pm

    @ 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:
    June 24th, 2007 at 7:47 pm

    [...] 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:
    June 25th, 2007 at 6:56 am

    [...] 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:
    June 25th, 2007 at 12:26 pm

    [...] 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:
    June 25th, 2007 at 11:21 pm

    [...] 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:
    June 26th, 2007 at 5:26 am

    [...] 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):
    June 26th, 2007 at 6:14 am

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

  57. Pingback from The Omni Mouth » OmniWeb 5.6 Sneaky Peeks are now available!:
    June 27th, 2007 at 3:17 pm

    [...] 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:
    June 28th, 2007 at 9:00 am

    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:
    July 3rd, 2007 at 3:06 am

    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:
    July 3rd, 2007 at 7:12 am

    [...] ž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:
    July 3rd, 2007 at 2:00 pm

    [...] 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:
    July 9th, 2007 at 5:03 am

    [...] 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:
    August 26th, 2007 at 7:44 pm

    [...] 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:
    October 22nd, 2007 at 1:24 am

    [...] 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:
    November 15th, 2007 at 4:33 am

    [...] [...]

  66. Pingback from JavaScript ベンチマーク SunSpider 0.9 - METAREAL:
    December 19th, 2007 at 6:30 am

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

  67. countZZero Says:
    January 7th, 2008 at 10:32 am

    Does this incorporate FTP/SFTP?

    Just curious…
    Karl A. Shalek
    www.fastercats.com

Related searches:
inspector safari webkit pingback archive
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.