Yet another one more thing… a new Web Inspector!
Posted by Timothy Hatcher on Wednesday, June 20th, 2007 at 5:00 pmAs 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.
June 20th, 2007 at 6:48 pm
Nice work guys, that is awesome!
June 20th, 2007 at 6:56 pm
Hot!
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.
June 20th, 2007 at 7:35 pm
[...] Safari just announced a new Web Inspector, and boy, does it sport a sexy network [...]
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.
June 20th, 2007 at 11:34 pm
@squareman
Those suggestions sound like they’d make great bug reports: http://webkit.org/quality/reporting.html
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”.
June 21st, 2007 at 12:16 am
[...] Surfin’ Safari wird ein neuer Webinspector für die WebKit nightly builds angekündigt, der mit einer [...]
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 [...]
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!
June 21st, 2007 at 4:04 am
Is there a way to get this to work with widgets?
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, [...]
June 21st, 2007 at 4:21 am
[...] The new inspector is available in the Mac and Windows nightly builds. Spread the word! [...]
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 [...]
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. [...]
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?
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 [...]
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.
June 21st, 2007 at 8:08 am
So how do you fire this up on .. er.. um.. Windows?
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 [...]
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.
June 21st, 2007 at 9:15 am
Right click on the page and select Inspect Element.
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: [...]
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″).
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.
June 21st, 2007 at 10:28 am
[...] WebKit team announced a new version of the Web inspector that [...]
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 [...]
June 21st, 2007 at 11:33 am
Doesn’t work with Vista. Everytime I try to run the .cmd file, safari crashes …
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 [...]
June 21st, 2007 at 11:58 am
[...] WebKit team announced a new version of the Web inspector that [...]
June 21st, 2007 at 1:14 pm
[...] Have you seen this? [...]
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 [...]
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)?
June 21st, 2007 at 2:01 pm
[...] WebKit [...]
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.
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 [...]
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 [...]
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 [...]
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 [...]
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 [...]
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..
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) [...]
June 22nd, 2007 at 4:08 am
[...] new Webkit Inspector is super-duper [...]
June 22nd, 2007 at 4:19 am
[...] Surfin’ Safari fresqui | menéame | permalink | trackback url volver [...]
June 22nd, 2007 at 6:22 am
[...] Sul sito ufficiale di WebKit ci giunge una lieta notizia: Web Inspector è giunto alla seconda versione! [...]
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 [...]
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…
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) [...]
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?
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.
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 [...]
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 [...]
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 [...]
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) [...]
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 [...]
June 26th, 2007 at 6:14 am
[...] Yet another one more thing… a new Web Inspector! [...]
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 [...]
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.
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/…)
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á [...]
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 [...]
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 [...]
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 [...]
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 [...]
November 15th, 2007 at 4:33 am
[...] [...]
December 19th, 2007 at 6:30 am
[...] や Web Inspector などの Web 開発者向けツールも提供してきたが、今度は JavaScript [...]
January 7th, 2008 at 10:32 am
Does this incorporate FTP/SFTP?
Just curious…
Karl A. Shalek
http://www.fastercats.com