Ten years ago today we
introduced the first version of Web Inspector to the world. That time was the wild west of web development, when your best debugging aid was
alert(). While the earliest version of Web Inspector was limited (it didn’t even have a console), it did expose two things that developers didn’t have much insight into — the DOM tree and matching style rules.
Web Inspector being open source also marked a pivotal moment for the WebKit project. It was one of the rare cases when major UI would become open source from Apple. You have to remember, WebKit was a nascent open source project at the time — only being released to the public 6 months earlier at WWDC 2005. We were still figuring out project goals and what direction the project would take. Ultimately, we made the final call to
open source Web Inspector — and it has been a great decision ever since.
As the years progressed, we rapidly added to the tool — exposing more features and evolving the UI to adapt to new developer workflows. To commemorate the past 10 years of Web Inspector, we put together this timeline of major events and past blog posts for posterity.
January 7, 2003
Apple unveiled Safari, the fastest and easiest to use web browser on OS X.
June 23, 2003
At WWDC 2003, Apple released Safari 1.0, completing a successful public beta program.
April 29, 2005
Safari 2 Released
It was included with the OS X 10.4 Tiger release.
June 7, 2005
WebKit Open Sourced
At WWDC 2005, Apple announced that the WebKit engine behind Safari available as open source.
January 15, 2006
The first version landed in open source. Did you know it used a native
NSOutlineView for the DOM tree as a pseudo-plugin inside the HTML user interface?
January 16, 2006
The first version let you browse the live DOM hierarchy in a compact HUD window. It showed all the CSS rules that matched the focused node and highlighted it on the page.
June 28, 2006
Drosera, named after the
June 11, 2007
At WWDC 2007, Apple released Safari 3 for OS X 10.5 Leopard, and beta versions for Windows XP, and Windows Vista.
June 20, 2007
March 18, 2008
Apple released Safari 3.1 for OS X 10.5 Leopard, Windows XP, and Windows Vista.
June 11, 2008
September 30, 2008
November 3, 2009
Introduced a number of exciting new features like the Storage panel, CSS syntax highlighting, Watch Expressions and Conditional Breakpoints.
April 14, 2010
Introduced the Timeline, Audits and Console panels along with many other improvements.
June 7, 2010
At WWDC 2010, Apple released Safari 5 for OS X 10.7 Lion, Windows XP, and Windows Vista.
Febuary 24, 2011
Showed off improved editing of CSS rules and jumping to the CSS resource from the Styles sidebar.
April 20, 2011
Documented the ways a developer can deal with exceptions and stack traces in Web Inspector.
June 11, 2012
Safari 6 Announced
Apple released a developer preview of Safari 6 which included a reimagination of Web Inspector that aligned the design and user experience with Xcode 4.
July 25, 2012
Safari 6 Released
Apple released Safari 6 with OS X 10.8 Mountain Lion.
June 10, 2013
Safari 7 Announced
Apple released a developer preview of Safari 7 with a revised Web Inspector user interface.
June 11, 2013
Announced the next version of Web Inspector, released as a developer preview at WWDC 2013.
October 22, 2013
Safari 7 Released
Apple released Safari 7 with OS X 10.9 Mavericks.
June 8, 2014
Safari 8 Announced
Apple released Safari 8 with a developer preview of OS X 10.10 Yosemite.
June 10, 2014
Explained how to diagnose and debug problems using new accessibility inspection features in Web Inspector.
October 16, 2014
Safari 8 Released
Apple released Safari 8 with OS X 10.10 Yosemite.
June 8, 2015
Safari 9 Announced
Apple released of Safari 9 with a developer preview OS X 10.11 El Capitan.
June 24, 2015
August 3, 2015
Explained the new tab-based user interface. Like the tabs in Safari, they can be rearranged to fit your workflow and personal development needs. This marked the return of dedicated Elements and Network tabs. The changes were covered in
Using Safari to Deliver and Debug a Responsive Web Design from WWDC 2015.
August 20, 2015
Showed off a preview of the new Visual Styles sidebar which allows designers and developers new to CSS to easily edit styles with intelligent editing widgets.
August 24, 2015
August 31, 2015
Introduced the various enhancements we made to Web Inspector’s Style sidebar in Safari 9 — such as text filtering and intelligent editing.
September 8, 2015
Introduced a new tool to help locate and resolve page rendering performance issues. The Timelines tab added a new timeline presenting a frame-based, task-specific view of existing profiler/instrumentation data — in addition to the familiar event-based timelines.
September 30, 2015
Safari 9 Released
Apple released Safari 9 with OS X 10.11 El Capitan and for OS X 10.10 Yosemite.
October 6, 2015
Documented the various keyboard shortcuts for many commonly used actions.
December 1, 2015
Documented the Debugger tab and the many options available to enhance standard breakpoints.
December 31, 2015
A brief tour through its architecture, history and main features for anyone interested in understanding or hacking on Web Inspector in WebKit.
January 11, 2016
Apple released a Safari 9.1 beta as part of the OS X 10.11.4 beta, containing many improvements to Web Inspector, including the
new Visual Styles sidebar.
January 16, 2016
As always, the latest features and enhancements can be found in
WebKit Nightly Builds. Help us make Web Inspector even better by sending us feedback on Twitter ( @xeenon, @jonathandavis), or by filing a bug.