10 Years of Web Inspector
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.



January 7, 2003

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


June 23, 2003

Safari 1.0 Released
            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

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?
        


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.
        


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.
        




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.
        


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.
        


March 18, 2008

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


June 11, 2008

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


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.
        


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.
        




April 14, 2010

More Web Inspector Updates

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


June 7, 2010

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


Febuary 24, 2011

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


April 20, 2011

Understanding Stack Traces
            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

State of Web Inspector

            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

Accessibility Node Inspector
            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

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.
        


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.
        


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.
        


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.
        


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.
        


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.
        


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

Keyboard Shortcuts Documented
            Documented the various keyboard shortcuts for many commonly used actions.
        


December 1, 2015

Breakpoint Options Documented

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


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.
        




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.
        


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.
        





                            
        