The Web Inspector makes introspection and debugging simpler than ever. Discover how you can use debugger stepping, editing cookies, and overriding network loaded resources to provide you with powerful development capabilities and help you create faster, more efficient websites.
Hi my name is Devin and I'm thrilled to be able to show you some of the many improvements and new features added to Web Inspector in the last year.
To start let's enable Web Inspector in Safari.
First, click on the Safari menu bar item and select Preferences to show Safari's Preferences. Go to the Advanced Tab and enable "Show Develop menu in menu bar." In the now visible Develop menu, click "Show Web Inspector." And there it is! Web Inspector is your one stop shop for all introspection and debugging tools for Web content whether that be in Safari, a WKWebView in an app or even a JSContext. Before we dive into individual features, let's take a look at some of the changes that have been made to the overall interface. We've merged the toolbar and dashboard into the tab bar to save on vertical space. Additionally, we've tightened the spacing around many controls throughout the interface, allowing you to see more content in Web Inspector without having to sacrifice on visibility of content in the inspected page. These changes also are not limited to when docked to the bottom, as they also apply when docked to the side and even when undocked into a separate window. We've also improved Accessibility support for navigating around Web Inspector when using a screen reader. For those of you that prefer Dark Mode, we've created Dark Mode variants for all of the icons throughout Web Inspector as well as added a way to toggle Dark Mode independently from the rest of the system in the Settings Tab. Because there is no longer a dashboard, the Network Tab now shows the Inspected Page Statistics below the main table and has been expanded to include the number of unique domains, the total transfer size and a count of all redirects. This year, we've added new features to almost every tab as well as adding a few entirely new tabs. So let's go through each, starting with the new Sources Tab. For those of you who've used Web Inspector in the past, the Sources Tab takes all of the best features of the Resources Tab and the Debugger Tab and combines them into a single tab.
Clicking on the Response breadcrumb item will show a dropdown with all of the alternate representations Web Inspector provides for this resource. Selecting the "Response (DOM Tree)" will visualize the response content as a DOM tree, just like we want it. Similar alternate representations are also provided for when the content is valid JSON, showing an object tree as if it were logged in the Console. These alternate representations are also available when content is sent as part of a request.
In situations that you do find an issue in the resource's response, it's not always easy to make a change to the source code that the resource was loaded from, as it may exist on a faraway server or involve complicated pre-processing steps.
I have a simple page that uses jQuery to add an event listener to a element. Because I've enabled the All Events breakpoint, I would expect to pause inside this event listener. But in reality, jQuery wraps my event listener callback with its own logic. So instead, we pause in jQuery's event listener wrapper which is not really ideal as none of this is my code. Really, what I want to do is have this breakpoint pause in my code after all of jQuery's code has run.
The Timelines Tab contains the majority of performance profiling tools offered by Web Inspector. It captures activity in the inspected page during what we call a "recording" which organizes and plots the data into one of a handful of different timelines based on the type of data.
Timeline recordings can also be exported and imported allowing you to share them with others or save them for later use. The main change this year in the Timelines Tab, is an introduction of an entirely new timeline, which you can activate by clicking the Edit button in the main graph area. This will put us in edit mode where we can enable or disable any of the various timelines. The new timeline we've added this year is the Media & Animations timeline which captures events related to media elements, like or , and also captures the lifecycle of CSS animations and CSS transitions. After checking the checkbox to enable the Media & Animations timeline and clicking the Done button to leave Edit mode, if we reload the inspected page we can see a list of all media elements, CSS animations and CSS transitions that have had any activity during the recorded interval. Each individual media element, CSS animation or CSStransition has its own row in the table with links to any related DOM node or information about the CSS 'animation-name' or CSS 'transition-property'. The Media & Animations timeline can also be used to correlate activity captured in other timelines with state changes in any media elements, such as a video being paused or the creation or destruction of any CSS animations or CSS transitions to figure out what's going on and understand why. And that's a quick look at the Media & Animations timeline in the Timelines Tab. Let's move on to the Storage Tab. So the Storage Tab contains a list of all of the data stored by the inspected page in the browser via things like cookies or LocalStorage or IndexedDB. This year, we've added filtering capabilities for all storage types and improved editing and deleting capabilities especially for cookies. The new filtering capabilities take the form of an always visible filter bar shown at the top of most storage views. As an example, filtering cookies is as simple as typing some text into the filter bar which is compared against the various fields of each cookie, hiding any rows that had no matches. The second major feature is the ability to edit cookies. Double clicking on one of a cookie's cells, will show a popover with inputs for each field of that cookie. All modifications made in this popover will be applied as soon as the popover is dismissed. It is also possible to add entirely new cookies by clicking on the add cookie button which will show a similar popover. But, this time, all of the inputs will be empty. Note, that a name is required in order for a cookie to be added. Just like HTTP cookies, or those set by 'document.cookie', they will persist beyond Web Inspector, so be careful what you add. But many other features of the web are not persistent, so let's take a look at tooling for some of those. Starting with the all new Graphics Tab.
If you're unsure of what something does, simply hover over it with your cursor for a few seconds, and voila! The answer will appear. Every icon in Web Inspector has a tooltip. All links have a tooltip. In fact, almost every component of the interface has a tooltip. Web Inspector makes heavy use of iconography as there's a ton of varying functionality that has to fit into a very limited amount of space. As such, it relies on tooltips to provide additional explanation and description where there isn't enough room. For a similar reason, Context Menus are everywhere and they often contain additional functionality that can't be accessed anywhere else. Many icons have a context menu.
Every link has a context menu. Again, almost every component of the interface has a context menu. And in fact, most of what we've done so far could have also been done via a context menu action. For much of the same reason as tooltips, Web Inspector puts a lot of functionality into context menu actions as there isn't enough room for each action to have its own component in the interface. For more tips like those, there's an all new section of the WebKit website that talks specifically about Web Inspector. It contains a bunch of reference pages that each explore both the breadth and the depth of various features, parts of the interface and more. In fact, many of the features we talked about today already have reference pages and we're working on writing even more from many of the others. Also, be sure to follow @webkit on Twitter as we post weekly tips about various features in Web Inspector.
And I'd also highly recommend using Safari Technology Preview for your daily development, as it gets bi-weekly updates with bug fixes and new features, both to Web Inspector and to the rest of WebKit. Be sure to check out this session's related resources for other sessions about some of these new features, as well as links to our documentation. I really hope you've enjoyed learning about what's new in Web Inspector and I hope you find that as things we've discussed useful for understanding and debugging web content in the future. Thank you so much for listening and
I hope you have a wonderful WWDC.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.