Web Inspector Update
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.
- 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.