Safari Web Inspector
I use Safari as my main browser, but I always keep Firefox running as well because of the superior web development tools that are available for it. Safari is a bit lacking in that respect, though there are some options. However, the WebKit team are about to change that by Introducing the Web Inspector:
The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window, catering to the needs of web developers and WebKit hackers alike.
The Web Inspector highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.
To try the Web Inspector out you can download a WebKit Nightly Build, load a page you want to inspect, right click on the element to inspect, and select “Inspect Element”. This brings up the Web Inspector window (which in my opinion should be completely opaque, so I would like to be able to adjust the transparency). You can then browse the DOM tree and select any element you want more info about. The selected element will also be outlined on the page, complete with a very Web 2.0 fade-out effect for those of you like that stuff. Very nice, and very useful for debugging purposes.
There is more to do before this matches the fantastic tools available for Firefox, but this looks really promising.
- Previous post: HTML or XHTML - does it really matter?
- Next post: Looking for web development patterns
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Just in case that some of the readers haven't heard yet, there's a nice toolbar available for Internet Explorer as well (not that I advise to run it as a default browser):
Internet Explorer Developer Toolbar
I just use the Safari WebDev Addition, does everything I need.
It is a pretty cool tool.. love the pro-look. But while on the topic of Safari you have an add to backbase: http://www.backbase.com/go/ and guess what? They don't support Safari... how silly is that?
Christopher: I gave that a try but didn't really like it. But it was a couple of months or so ago, so I'll take another look at it.
Jesse: Yeah I've noticed that. Pretty silly for a company like that to not support Safari. Guess they didn't read Safari matters - support it or lose credibility.
You can adjust it by setting the background-color: rgba() value in the "inspector.css" file.
Jesse: A bug report is in the WebKit bug system about Backbase not supporting Safari. It has been marked as HitList, which means:
Mark: Thanks for that... there are a couple of potentially annoying Safari bugs in there. I just haven't done enough AJAX to find them.
I still think the backbase site should at least work in Safari and not spit out errors. Just because a browser may not support your style of JS doesn't mean you give it a broken page.
I downloaded the webkit and it seems to do a great job. I think i would use Safari all the time over FireFox if it had a tabbed interface. Is anyone aware of such a plugin? let me know.
Dennis: Safari has tabs. Go to Preferences > Tabs and check "Enable Tabbed Browsing".
Oops, it required me running 10.4 to use the Nightly Build WebKit. Sigh..
is there anyway of getting webkit up and running without osx 10.4 ? running 10.3.9 with safari 1.3.2 (v312.5)
Only a little type mistake:
Sorry, comments are closed for this post.