Saturday, 16 January, 2016 UTC


Summary

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