10 Years of Web Inspector

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.

  1. January 7, 2003

    Safari Unveiled

    Apple unveiled Safari, the fastest and easiest to use web browser on OS X.

  2. June 23, 2003

    Safari 1.0 Released

    At WWDC 2003, Apple released Safari 1.0, completing a successful public beta program.

  3. April 29, 2005

    Safari 2 Released

    It was included with the OS X 10.4 Tiger release.

  4. June 7, 2005

    WebKit Open Sourced

    At WWDC 2005, Apple announced that the WebKit engine behind Safari available as open source.

  5. January 15, 2006

    Web Inspector Landed

    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?

  6. January 16, 2006

    Web Inspector Introduced

    Web Inspector

    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.

  7. June 28, 2006

    Drosera Introduced

    Drosera JavaScript Debugger

    Drosera, named after the largest genera of bug eating plants, let you attach and debug JavaScript for any WebKit application — not just Safari.

  1. June 11, 2007

    Safari 3 Released

    At WWDC 2007, Apple released Safari 3 for OS X 10.5 Leopard, and beta versions for Windows XP, and Windows Vista.

  2. June 20, 2007

    New Version for Safari 3

    New Web Inspector on Windows

    With a completely redesigned interface, that also worked on Windows. It supported docking to the page, introduced the network waterfall, inline JavaScript and HTML error reporting and a lot more.

  3. March 18, 2008

    Safari 3.1 Released

    Apple released Safari 3.1 for OS X 10.5 Leopard, Windows XP, and Windows Vista.

  4. June 11, 2008

    Safari 4 Released

    Safari 4 featured the Nitro engine which ran JavaScript up to 4.5 times faster than Safari 3.

  5. September 30, 2008

    Web Inspector Redesign

    Web Inspector Redesign

    The standalone Drosera JavaScript debugger was replaced with a new JavaScript integrated debugger. The redesign introduced the split Console, console auto-completion, style property editing and more.

  6. November 3, 2009

    Web Inspector Updates

    Web Inspector Updates

    Introduced a number of exciting new features like the Storage panel, CSS syntax highlighting, Watch Expressions and Conditional Breakpoints.

  1. April 14, 2010

    More Web Inspector Updates

    Web Inspector Timeline Panel

    Introduced the Timeline, Audits and Console panels along with many other improvements.

  2. June 7, 2010

    Safari 5 Released

    At WWDC 2010, Apple released Safari 5 for OS X 10.7 Lion, Windows XP, and Windows Vista.

  3. Febuary 24, 2011

    Style Editing Enhanced

    Showed off improved editing of CSS rules and jumping to the CSS resource from the Styles sidebar.

  4. April 20, 2011

    Understanding Stack Traces

    Documented the ways a developer can deal with exceptions and stack traces in Web Inspector.

  1. 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.

  2. July 25, 2012

    Safari 6 Released

    Apple released Safari 6 with OS X 10.8 Mountain Lion.

  3. June 10, 2013

    Safari 7 Announced

    Apple released a developer preview of Safari 7 with a revised Web Inspector user interface.

  4. June 11, 2013

    State of Web Inspector

    Announced the next version of Web Inspector, released as a developer preview at WWDC 2013.

  5. October 22, 2013

    Safari 7 Released

    Apple released Safari 7 with OS X 10.9 Mavericks.

  6. June 8, 2014

    Safari 8 Announced

    Apple released Safari 8 with a developer preview of OS X 10.10 Yosemite.

  7. June 10, 2014

    Accessibility Node Inspector

    Explained how to diagnose and debug problems using new accessibility inspection features in Web Inspector.

  8. October 16, 2014

    Safari 8 Released

    Apple released Safari 8 with OS X 10.10 Yosemite.

  1. June 8, 2015

    Safari 9 Announced

    Apple released of Safari 9 with a developer preview OS X 10.11 El Capitan.

  2. June 24, 2015

    Console Improvements

    Demonstrated improvements to the Console by giving developers quicker access to useful data and modernizing it to work better with the new changes in JavaScript.

  3. August 3, 2015

    User Interface Changes

    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.

  4. August 20, 2015

    Visual Styles Sidebar Previewed

    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.

  5. August 24, 2015

    JavaScript Type and Code Coverage Profiling

    Added two great tools designed to make debugging JavaScript programs easier: the Code Coverage Profiler and the Type Profiler. Both tools made understanding and debugging your JavaScript programs better than ever.

  6. August 31, 2015

    Styles Sidebar Refinements

    Introduced the various enhancements we made to Web Inspector’s Style sidebar in Safari 9 — such as text filtering and intelligent editing.

  7. September 8, 2015

    Rendering Frames Timeline Introduced

    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.

  8. September 30, 2015

    Safari 9 Released

    Apple released Safari 9 with OS X 10.11 El Capitan and for OS X 10.10 Yosemite.

  1. October 6, 2015

    Keyboard Shortcuts Documented

    Documented the various keyboard shortcuts for many commonly used actions.

  2. December 1, 2015

    Breakpoint Options Documented

    Documented the Debugger tab and the many options available to enhance standard breakpoints.

  3. December 31, 2015

    Architecture of Web Inspector

    A brief tour through its architecture, history and main features for anyone interested in understanding or hacking on Web Inspector in WebKit.

  1. January 11, 2016

    Safari 9.1 Beta Released

    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.

  2. January 16, 2016

    10 Year Anniversary

    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.