Web Inspector provides a powerful set of tools to debug and inspect web pages, web extensions, and WKWebViews on macOS, iOS and iPadOS. We'll share the latest updates, including improved typography inspection, editing tools for variable fonts, controls to emulate people's preferences, element badges in the DOM node tree, and Symbolic breakpoints.
This year, we've made many improvements to all of the developer features in Safari, including a streamlined way to pair and inspect web content on devices, a quick way to open a web page in a Simulator, a refreshed Responsive Design Mode, and many others. To learn more, watch this session titled "Rediscover Safari developer features" from this year's WWDC. Now that Web Inspector is enabled, let's start by looking at the new tools for typography inspection.
Web developers use custom fonts to create beautiful content with type that is both legible and makes it stand out. But getting typography on the web just right is not always easy. First, the right font file needs to be loaded. It must be in a format supported by the browser and with the right features. And it should include the right glyphs for the characters of the written language it's going to represent. Then, there are many CSS properties that influence the way a font renders on screen. And most of them are inheritable through the cascade, sometimes leading to confusion, like, "Which font face was actually used?" Or "Why is this bold?" Or "Is this style really italic?" Web Inspector can help with a host of typography inspection tools. You can find them in the Details sidebar of the Elements tab, in the Font panel.
It shows properties and capabilities of the font used on the selected element, such as the name of the primary font used. You can reference this to quickly check if the font you expected was indeed used. Keep in mind that this only identifies the primary font. If the selected node includes characters for which the primary font does not have glyphs, a fallback font will be used for those. Next, the Font panel shows a summary of the basic font properties, like font size, style, weight, and stretch.
There's also a section that shows the supported font feature properties and their used values. These toggle special aspects of a typeface such as ligatures, small caps instead of lowercase characters, special numeric styles, and many others, depending on what the font supports. New this year, the Font panel shows warnings for synthetic bold or oblique styles. What's a synthetic style? Let's take italic as an example.
Italic styles are often supplied in their own font files, separate from the ones for the regular upright styles. When a suitable italic style is missing, WebKit generates an artificial representation for that. It runs an algorithm over the regular upright font style and skews the individual glyphs to produce an oblique style. This is called a synthetic oblique.
Font designers pay a lot of attention when crafting italic styles. Often, these aren't slanted versions of the upright style, but instead they're cursive, specially designed to convey a particular aesthetic. Something similar happens for synthetic bold, where the stroke of the glyphs is made artificially thicker. Keep in mind that not all fonts support this. Web Inspector now displays a warning when a synthetic bold or oblique is used. It shows up next to the synthesized weight or style in the basic properties section of the Font panel. This warning can be a hint that the expected font file was not loaded. But sometimes, it may be that the font file just doesn't support the exact values you asked for. That's where variable fonts can help. What's a variable font? Put simply, it's a font format that can include, in a single file, all the information needed to generate multiple style variations for a font, such as weight, width, slant, and others.
And for each supported style, variable fonts provide a spectrum of values compared to just a few discrete values in static font files. This gives you a lot more flexibility to choose the exact style that's right for your content. Variable fonts are even more capable. A font designer can make almost every aspect of a font configurable, from the thickness of the stroke, the curves of the glyphs, the width of the characters, and many others. The possibilities really are vast. All aspects of a variable font that can be configured are expressed as variation axes. To know which are available, you'd either have to read the font's documentation or use a special tool that reveals this information.
Web Inspector can help here. When you inspect an element that uses a variable font, the Font panel shows you a list of the supported variation axes. For each, it shows its axis tag-- a four-character identifier-- an optional axis label, the supported minimum and maximum values, as well as the current value, or the default value if one is not specified in CSS.
This year, we added interactive controls to edit the values of variation axes and see the results live on the inspected page.
This gives you a great way to tweak the font styles until they're just right. Let me show you. Here's a web page I'm building for a travel photography blog. I have the layout just as I want, with a photo gallery and navigation by labels, but I'm still not sure about the look of the title. I'll right-click to inspect the heading element.
In the Font panel, I can see this is using a variable font.
I can tell because I have these controls for the available variation axes that I can play around with. For example, I can drag the slider for the Weight axis. This immediately changes the font weight of the title live on the inspected page.
Notice how the corresponding CSS font weight property is written to the Styles panel. A static font would have just a few font faces for weight in increments of 100. But with a variable font, I can chose any value within the range of the variation axis. Let's also try the variation axis for Width to see how this looks wider or narrower.
I can also type in the axis value input field or I can hold the ArrowUp or ArrowDown keys to change the value in precise increments.
I like this slightly condensed version. I'd like it a bit bolder, but I want it to keep this width. This variable font also provides a custom variation axis to change the Grade of the font. When I drag the slider for this, notice that the individual characters get thicker in-place without shifting position like they did when I changed the Weight axis.
This looks nice. To integrate these changes back into my project, I can copy the new CSS properties from the Styles panel or from the Changes panel.
We've seen how to inspect typography and how to tweak font styles with variable fonts. Now, let's move on to another new feature in Web Inspector that allows you to emulate user preferences so you can make sure the content you're building adapts to user needs. All Apple products offer a variety of settings that allow people to configure their devices to adapt to their needs and preferences, like the Accessibility settings on macOS which control things like the built-in screen reader, VoiceOver, or Display preferences, which control reduced motion, increased color contrast, color filters, and many more. One of the most popular things people do on their devices is to browse the web. So it makes sense to build websites and web apps that strive to welcome everyone. To do that, you sometimes need to experience the web the same way other people do when they set user preferences.
To test your website with, say, the preference for reduced motion, you could go to the Accessibility Settings on macOS and set it there. But that will influence the entire system, not just Safari and your website. What you often want is to set it just for the page you're testing.
To help you with that, we've introduced a new tool in Web Inspector to emulate user preferences. Click the new icon in the Elements tab to reveal the User Preference Overrides popover. Here, you'll find a set of toggles to override user preferences just for the inspected page while Web Inspector is open. These preferences map to CSS media features which you can use to adapt the style and behavior of your web page. For example, the preference for color scheme maps to the prefers-color-scheme media feature in CSS. Here's how to use it: you can set an element's styles for the default light color scheme. Then, use the prefers-color-scheme media feature to check if a dark color scheme is preferred and update the styles. Check how the page adapts by using the User Preference Overrides popover. In the Appearance section, override the color scheme preference to Dark. The icon changes color to indicate an override is applied. The styles for the dark color scheme will be applied while the override is active and Web Inspector is open. This control for color scheme used to be a standalone button. It now joins the other controls for preference overrides in the popover.
Next, I'm going to show you how to override the preference for reduced motion. This next section displays an animation with a lot of motion. If you are sensitive to this, you may want to skip the next three minutes of this video. Back on my page, these animations that run when I click on a photo to enlarge it are perhaps a bit too much.
Some people can get disoriented by animations with quick and sudden motion, particularly when it happens on the z-axis. It can cause discomfort, like nausea or headaches. This is definitely not a welcoming experience for them. People can set the preference for reduced motion on their devices to signal that they want websites and web apps to adapt. Us web developers should respect that. This is where the prefers-reduced-motion CSS media feature is useful. If the animation is just for decoration, you can remove it. But remember, some animations are useful to convey meaning in an interface. Removing them can affect usability. A slower and more subtle fade animation may still work well to communicate change and also satisfy people's needs. Let's try that change on my web page. First, I'll inspect the photo and select the figure element in the Elements tab of Web Inspector.
This reveals all its matching CSS rules in the Styles panel. Here's the CSS property that sets the animation with a lot of motion. It runs for everyone now. Next, I'll click on the source code location of this CSS rule to jump to where it's defined in the stylesheet.
This opens the Sources panel and puts me right next to that CSS Rule which has the animation I want to change. I'll uncomment this block of code I prepared earlier. It's guarded by a prefers-reduced-motion CSS media feature. Here, I change the animation to a fade, instead of the one that zooms the photo, and I also increase the animation duration so it doesn't feel as sudden.
Now I'll click again on an image on the page to see how that looks.
Oh! It still runs the same animation. That's happening because I defined the new animation guarded by the prefers-reduced-motion media feature. But the page still respects the default system value for this preference, which is set to Off. Let's adjust that. I'll click back to the Elements tab. Here, I'll open the User Preference Overrides popover.
In the Accessibility section, I'll open the popup menu to override the user preference for "Reduce motion." I'll change it from the default value on my system and set it to On.
Now, I'll click again on a photo on my page.
And look. The photo now slowly fades into view. No more disorienting movement. This is a better experience for those who prefer reduced motion. I'll remember to integrate these changes back into my project. The last item in the User Preference Overrides popover, "Increase contrast," maps to the prefers-contrast CSS media feature. Ideally, you want to build content that has a high level of color contrast for everyone. But if your design system constrains you, use this media feature to adapt your styles for people who benefit from increased contrast. Then, check that the styles on the inspected page adapt accordingly. Override the preference for "Increase contrast" to On. We hope you use these features to build content that even more people can enjoy using. Next, I want to tell you about the new element badges in the Elements tab of Web Inspector. In the node tree view of the Elements tab, you can already see badges next to elements that act as CSS Flex or CSS Grid containers. Element badges provide a quick way to identify at a glance nodes of particular interest. In this case, nodes that create a CSS Grid or Flex layout context.
You can click on the grid and flex element badges to toggle the specialized page overlay for that node. The highlight color of the badge matches the color of the page overlay. The CSS Grid and Flexbox page overlays show guides that reveal the lines, gaps, and the available space which determine the layout. To learn more about how to debug CSS Grid and Flexbox layout with page overlays, watch these sessions from previous years. One of the trickiest CSS layout issues to debug is unwanted scroll, like a container that scrolls horizontally because the content inside it doesn't fit the available width. This type of issue can lurk undetected for a long time when scroll bars are not visible by default. To help you identify unwanted scroll, we've added a new element badge that shows up next to scroll containers. It provides a quick visual hint in the node tree when an element's content overflows its bounds and a scroll bar is applied. Let's look at a common example of unwanted scroll and how to fix it. Back on my page, I see these labels at the top of the photo gallery appear be nicely laid out to use all available horizontal space. But when I try to swipe, I notice there's a short horizontal scroll in this container. This is something I don't want. And the last label is slightly cut off. It gets even worse when I resize the window. In the node tree in the Elements tab, I notice there's a "scroll" badge next to the container for the labels. I'll click this element to reveal its matching CSS Rules in the Styles panel. This Flexbox container looks right. How about its flex items, the labels themselves? This overly precise value for the minimum-width property looks strange. It was probably my naïve attempt to tell the browser exactly what to do instead of telling the browser what I want and letting it do the math.
To fix this, I'll comment out this minimum-width declaration. Now, each label takes up as much space as it needs. But there's a lot of unused space left. To fix this, I'll add a flex property with a value of 1.
Whatever code runs on my end, it has to eventually call the navigator.share() browser API which shows the system popover. Let's set a breakpoint before the share() function is invoked. I'll click away to set my Symbolic breakpoint. And now I'll click the share button on a photo on my page. And look, Web Inspector has paused before navigator.share() is invoked. I'll hover over the data object passed to this method. Here, I can see the contents of the object. It seems the value for the URL key that gets shared is indeed wrong. Where does this come from? In the Call Stack section of the Sources tab, I can see the chain of functions that were called to get to this point. Looks like the click event handler was called before. I'll select its entry in the Call Stack to jump to that function. Here, I can see the code that builds the data object which gets passed to the sharePhoto() function. And by the look of the code comment here, I meant to implement this, but I forgot. Let's fix that now. I'll click to set a breakpoint on this line. Then, I'll right-click and select Edit Breakpoint.
And there's so much more that Web Inspector can do. If you want to learn more about these and the many other features you can use, go to webkit.org to find in-depth blog posts and documentation. We'd also like to hear from you. If you encounter an issue or have ideas for how we can improve Web Inspector, please let us know by filing an issue on WebKit's bug tracker for the Inspector product. I'd also like to encourage you to download Safari Technology Preview. It is released every few weeks and contains the latest tools and technology in WebKit, as well as bug fixes and improvements, before these reach the next version of Safari.
Before I go, if you want to learn more about what's new for developers in Safari this year, check out these great sessions: "Rediscover Safari developer features" and "What's new in CSS." Thanks for watching.
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.