Web Inspector Update
Posted by Adam Roben on Thursday, December 6th, 2007 at 12:55 pm
As Maciej said, web developer tools are a big new feature of WebKit 3. Since we first introduced the new Web Inspector back in June, Tim Hatcher (xenon in #webkit) has been spearheading the effort to make the Web Inspector an even better tool for web developers, and I wanted to give an update on the progress we’ve made so far. If you’ve never used the Inspector before, you should follow the instructions to enable the Web Inspector on the WebKit wiki.
New Features
- Inline CSS Editing
This is the biggest new feature of the Inspector. You can now edit CSS styles simply by double-clicking them in the Inspector’s Styles sidebar. This is really handy for tweaking the look of your site live in the browser.- Support for Downloadable Fonts
- When you visit a site that uses downloadable fonts via @font-face rules, the Inspector will show you all the fonts downloaded by WebKit in the Resources sidebar. Each font has a small icon preview in the sidebar and a more complete preview when you select it.
- Database Browser
- WebKit now supports the HTML5 SQL storage API, and the Inspector has full support for this new feature. You can execute SQL queries right in the Inspector and see the results live, or browse through all the databases and tables a website uses.
- Support for New CSS Properties
- The Inspector shows the new CSS transform and animation properties in its Styles sidebar. You can even trigger animations on the fly by using the Inspector’s inline CSS editing!
- Multi-Platform Support
- The Inspector was designed from the beginning to be easily implementable on many platforms, and has worked on both Mac OS X and Microsoft Windows from the very beginning. Recently, Holger Freyther has stepped up and implemented the Web Inspector on Qt.
- Usability Improvements
- In addition to all these big features, we’ve spent some time fixing some of the little things that make the Inspector that much easier to use. The list of usability improvements includes resizable sidebars, resizable search area, size-to-fit DOM breadcrumbs, and better selection and copying behavior. One of my favorite features in this area is that when you Copy while a node is selected in the DOM view, the serialized source for that node and its children are put on the clipboard. This makes it incredibly easy to take a portion of a live website (complete with any modifications that have been made to the DOM) and modify it in a text editor.
You can try out all these new features today by running a nightly WebKit build.
Future Work
There’s still a lot of work to be done on the Inspector, and we’d love to have your help. Most of the Web Inspector is written in HTML, JavaScript, and CSS, so it’s easy to get started making changes and improvements. There are some really interesting tasks in the list of Web Inspector bugs and enhancements, and the WebKit contributors in the #webkit chat room are pretty much always available to provide help and advice.
December 6th, 2007 at 1:22 pm
Woo!!! CSS Editing FTW!!!
December 6th, 2007 at 1:43 pm
Nice. Very nice.
By the way, not exactly intuitive, but it is possible to add new style properties by adding them after the semi-colon!
December 6th, 2007 at 6:35 pm
How do you install the new web inspector in safari 3 instead of webkit 3
December 6th, 2007 at 6:40 pm
@MySchizoBuddy:
The Web Inspector is included with Safari 3. Instructions to enable the Web Inspector are linked in the first paragraph of the blog post.
December 6th, 2007 at 6:45 pm
yes i have enabled it in safari 3 but i cannot do inline css edits, Do i have to download and install the new webkit to get these new features. and will these new features work in safari 3 as well.
December 6th, 2007 at 7:24 pm
As mentioned in the blog post:
December 7th, 2007 at 12:06 am
The Web Inspector is great. I would like to see an Xpath field performing an Xpath query and selecting the results, that would be very useful.
December 7th, 2007 at 12:32 am
Feature requests should be filed in Bugzilla at http://bugs.webkit.org/.
December 7th, 2007 at 8:58 am
Are those features Leopard only?
I have the lastest WebKit nightly, and they aren’t working
December 7th, 2007 at 10:02 am
@0xced:
You can already type XPath queries right into the Inspector’s search field!
December 7th, 2007 at 10:02 am
@Roberto:
The features should work on Tiger, Leopard, Windows, and Qt. Please file bugs at http://bugs.webkit.org/ for any issues you see. Thanks!
December 7th, 2007 at 2:21 pm
Inline CSS editing sounds great, but like others have posted, it doesn’t appear to work. I’m using r28505 on Tiger and Leopard.
December 7th, 2007 at 4:29 pm
@mac_:
Please file a bug at http://bugs.webkit.org/
December 7th, 2007 at 6:08 pm
@Adam Roben:
sure, filed here:
http://bugs.webkit.org/show_bug.cgi?id=16350
Sorry for the lack of information there, it just doesn’t appear to be implemented. I would have filed a bug sooner if I had more precise information (i.e., it works in this case, but not this other case), but all that I can guess is that I’m doing something wrong because it just doesn’t appear to work at all. Has anyone else gotten this working? If so, what build were you using?
January 3rd, 2008 at 8:03 pm
I have finally gotten this to work. I’ll walk through what I did. 1st, downloaded Jan 3 build. Didn’t work. Went to web inspector wiki, noticed a bit about double clicking DOM nodes to drill in. I’ve never tried that, so I decided to try it. Then I tried editing a style sheet and it worked. So I thought that was it. Tried to reproduce my success. Didn’t work. Bag the DOM issue. Then tried inspecting the text of the previous post on this page. Most styles wouldn’t edit, but some would. look for “.commentlist p”, then try to edit font-weight:normal. Clicked 3 times slowly on “normal”. Eventually gave me an edit box! Even allowed me to change to font-family: zapfino; On second attempt (third?) it looks like you can’t edit anything in the “Computed Style” box, which I suppose makes sense. Yep, that appears to be it! Sweet.
January 3rd, 2008 at 8:14 pm
looks like I got too cocky. Tried doing this trick on another page… didn’t work. Come back to this page to reproduce my success, doesn’t work. Grrrr. So this feature is definitely flaky. Will be awesome when it is fully baked.