Rediscover Safari developer features

♪ Mellow instrumental hip-hop ♪ ♪ Hi, I'm Patrick, an engineer on the WebKit Developer Experience team, and I'm excited today to take you on a tour of the features available to web developers in Safari. Safari includes features that give web developers and designers like you access to a rich set of tools to inspect your web pages, web apps, apps with JavaScript and web views, extensions, and more. And these tools work seamlessly across iOS, iPadOS, tvOS, and xrOS when paired with a Mac. Today we're going to cover the breadth of the developer tools available to you in Safari, starting with a brief look at tools to help you inspect your web pages on macOS. Then we'll look at how you can preview your responsive layouts in Safari, as well as in iOS, iPadOS, and xrOS simulators. Next, we'll continue beyond your Mac and look at how you can debug content running on other devices, like iPhone or a device running xrOS, with your Mac. Then, we'll look at how you can use WebDriver to perform automated testing in a cross-browser and cross-platform way. And lastly, we'll look at how you can explore future web platform features using our redesigned feature flag settings. But, before we dig in to those topics, if you haven't used the developer features in Safari before, you'll have to enable them. You can find the option to show features for web developers in Safari's settings. To get there, choose Safari from the menu bar, and then choose Settings. From the Settings window, click on the Advanced tab. Here you'll find the Show features for web developers checkbox. Enable the setting. Now that we've enabled features for web developers, let's begin by taking a quick look at how you can use the tools in Safari to inspect an open webpage. Here's a webpage I've been working on where I've been trying to get the background color just right. And I think what will really pull everything together is if I grab a color from the astronaut's helmet. Let's look at how I can use Web Inspector to help me pick a color to be part of the background gradient on this page. There are two ways to quickly open Web Inspector to inspect a page you're working on. The first is in the Develop menu, which we've rethought this year to make it easier to find the key tools available to help you while designing and developing web content. There are several items in the menu that can open Web Inspector straight into a tab or task. Since I just wanted to open Web Inspector and not jump to a specific tab, I would choose Show Web Inspector here. But there's another convenient way to open Web Inspector I want to show you. Anywhere on a web page, you can Control-click to show a context menu and choose Inspect Element, which not only shows Web Inspector but also selects the element, showing its style and other information in the details sidebar. Using the Inspect Element item also works even after Web Inspector is visible. You can choose another element the same way, or use the element selection tool to see information about each element you hover, including selectors, layout information like margin, shape outlines, and accessibility roles. When you click in element selection mode, the element is selected in Web Inspector. But now that I have opened Web Inspector, I want to look at the background gradient of my page. I'd really like to make the astronaut more at home by sampling some color from their visor. To edit a gradient, you can click on the preview swatch next to the gradient in the Styles sidebar. Pick the part of the gradient you want to edit, and then use the color picker to grab a color from somewhere onscreen, like the astronaut's visor.

Hmm, that's a bit too bright for my liking. Maybe this wasn't such a good idea. I think it looked better before. I'll undo my change with Command-Z and keep the color the same for now. Of course, this is just one of many ways in which Web Inspector helps you inspect your web pages. If you want to learn more about the tools available in Web Inspector, be sure to check out "What's new in Web Inspector" as well as "Discover Web Inspector improvements" from WWDC21. Now, let's look at another tool aimed at helping you refine the design of your web pages by testing your page's ability to adapt to your user's displays. Safari has a tool called Responsive Design Mode for this task, which is accessible from the Develop menu using the Enter Responsive Design Mode item. If you've used Responsive Design Mode before, you may have noticed that we've made adjustments to allow you to focus on the responsiveness of your content's layout across any screen size. You can try out viewport sizes larger than your window, or even your screen. As you drag the handles on the sides of the viewport, the viewport will scale to continue displaying all of your page, reflowing elements like text and images to fit the new viewport. You can also target a specific size by typing in your own width and height above the viewport. To the right of the width and height, you'll see the scale factor, which is the percentage of actual size at which the viewport is being rendered. Here the scale factor isn't 100 percent because the current height of the viewport is 800 pixels, but the window wasn't tall enough to show the entire viewport, so Safari shrunk the display of the viewport down to 78 percent of full size. Responsive Design Mode also lets you change the pixel ratio, allowing you to test an extra dimension of responsiveness by providing image assets and other styling tailored to the pixel ratio of different displays. There are several ways to respond to the pixel ratio of a display on the web, including source sets for image tags, the CSS image set function that can be used anywhere an image can be, and resolution media queries, allowing you to tweak any aspect of your page's style, like border sizes, in response to the pixel ratio of a display. Sometimes, though, you might be trying to test your page's responsiveness not just on macOS, but on iOS, iPadOS, and xrOS as well. New this year, we've introduced the ability to quickly jump into a simulator from Safari. Simulators are a great way to test web content on iOS, iPadOS, and xrOS without needing a physical device. iOS and iPadOS simulators are included with Xcode and include Safari for those platforms. Xcode is a free download in the Mac App Store. And after you run Xcode once to finish setting it up, simulators become available next time you launch Safari. When you click Open with Simulator, a list of installed simulators is shown, with currently running simulators brought to the top for easy access. If you don't have Xcode installed, or are looking to add simulators for other devices, you can follow links from the menu to view documentation to help you get started. Let's open the current page in a simulator. This simulator was already running, but if a simulator is not already running, it will be started for you. An important thing to pay attention to is the differences in page layout between the simulator and Safari on macOS. Notice how even at roughly the same width, Safari on iOS lays out the page as if more screen real estate were available. One of the other great aspects of the simulator is that you can test behaviors that users expect to work on iOS, like smooth scrolling and double-tap to zoom, to ensure a great user experience even if you don't have an iPhone. And, once you've opened a web page in a simulator, you can also inspect it using Web Inspector from the Develop menu by finding the simulator and then choosing the web page in the simulator you want to inspect. Web Inspector then opens in its own window, inspecting the chosen page from the simulator. In addition to iOS and iPadOS, you can take advantage of the xrOS simulator to test your web content on that platform. If you don't have the simulator installed, choose Add simulators from the Open with Simulator menu to learn how to add them. Once you've installed the simulator, you can use it the same way as you do iOS simulators, including inspecting web content using Safari on your Mac. Find the simulator in Safari's Develop menu and choose the content you want to inspect. In fact, not only can you inspect simulators from Safari on macOS, but you can also inspect iOS, iPadOS, tvOS, and xrOS devices from Safari on your Mac. Unlike a simulator, you have to enable inspecting content on the device before you can use your Mac to inspect it in order to opt your device in to providing a list of open web pages in Safari and other apps that are inspectable. For iOS and iPadOS, you can do this from the Settings app. Scroll down to and choose Safari, and then scroll to the bottom and choose Advanced. Now toggle Web Inspector. Finally, connect your device to your Mac using a cable. Here, I've opened a few pieces of web content on an iPad, including a Safari window as well as a Home Screen web app. Now let's return to the Mac to inspect this content. From the Develop menu on your Mac, you'll see an entry for the device you just connected in the same place as the simulators we used earlier. And like its simulator counterparts, you'll see its inspectable content, including the web page we opened in Safari, as well as Home Screen web app and even its service worker. Like we did earlier, we can choose a piece of inspectable content from the menu, like the Home Screen web app. And like before, Web Inspector appears, inspecting the content on your device from your Mac. But wouldn't it be great if you didn't always need to use a cable to inspect your device from your Mac? Let's go back to the Mac and take a look at how we can connect to your device over the network. Back in the Develop menu, you'll find an item titled Connect via Network. Once selected, your device can now be connected to without needing a wire so long as both your Mac and your device are on the same network. And with that setting enabled for your device, you can now unplug the device and inspect it wirelessly. New this year, you'll also be able to inspect your xrOS device from your Mac running macOS Sonoma. However, getting started will be a bit different than it is for iOS and iPadOS. To allow inspecting the device without a wired connection to your Mac, we support pairing with this platform over the network. Let's pair with my colleague's device. To get started, open Settings, and choose Apps and then Safari. Scroll down to the bottom and choose Advanced, and then enable Web Inspector. Now, you need to pair the device with your Mac. You'll want to make sure both your Mac and your device are connected to the same network. Then from the Settings app, choose General and then Remote Devices. While the Remote Devices screen is visible, your device is available for pairing from macOS. On your Mac, open the Develop menu in Safari, and from the device's submenu, choose Use for Development. On your device, a six-digit pairing code will be displayed, and on your Mac, a window will appear in which to enter the pairing code. Type the code into your Mac. Once you've entered the code, pairing will complete automatically, and your Mac will be listed in the Remote Devices list on your device. Once the device is paired, you can open Safari and inspect web pages and other content with your Mac the same way you can iOS devices. Even element selection mode works. Enter element selection mode the same way we did earlier on macOS, look at the node you want to inspect on the web page, and pinch to select. If you'd like to learn more about designing and developing web content for xrOS, check out "Meet Safari for spatial computing." Web content extends beyond Safari and web apps too. Web pages and JavaScript are used by over one million apps across Apple's platforms, and new this year is the ability to make that content inspectable in release versions of your apps. Your app may use web content for part of its user interface, or you may use JavaScript to control parts of your app. In these cases, there is API available in macOS 13.3 and later, iOS and iPadOS 16.4 and later, and xrOS to enable inspection of content in your apps. This API is available for both WKWebView and JSContext. We recommend that you provide a name to each JSContext when making it inspectable, which will be displayed in the Develop menu of Safari to help you distinguish between multiple JSContexts. And, once an application has enabled inspection of some piece of content, it can be inspected from the Develop menu of Safari, just like you inspect other web content from your devices. Now that we can inspect and debug content across devices, let's talk about a way you can make sure content continues to behave as expected with WebDriver. As the web evolves, it's important to continually test your web pages to ensure they behave as you expect. WebDriver is a cross-browser API for automating testing of web content supported by all major browsers across platforms without requiring browser-specific code. It hosts a local web server that accepts HTTP requests so it can accept automation commands from a wide variety of test setups, and provides numerous commands you can use to run automated tests against your webpage, like finding an element, getting the accessibility role of an element, executing JavaScript, and even taking screenshots. Most of the time, you'll interact with WebDriver using a third-party library. One such popular library is Selenium, which provides API in Python, Java, PHP, JavaScript, and more. Here is an example of a Python script that we can use to automate Safari with Selenium. It will create a driver with default options for Safari. Then we'll navigate to webkit.org's Web Inspector documentation. Once there, we'll find the search field and type "device" into it. To finish, we'll assert that we can still find the Device Settings link. And when we're all done, we'll end the automation session to allow Safari to clean up the window we opened. Let's run this script. A new window is created with an orange title bar, indicating this window is being automated. We can see that the test performs interactions like typing just as a user would. Believe it or not, that was slowed down to make it easier to see what was happening. At full speed, the test is over almost as soon as it began. And this is just a taste of what's possible with WebDriver and Safari. Tests can also be run in iOS and iPadOS simulators, as well as on a physical iPhone or iPad. Now that we've explored what's available today, let's look at how you can explore the future of the web platform. The web is constantly evolving. It can be exciting to see potential future tools and technologies, and even more exciting to begin experimenting with them before they ship in web browsers. Safari lets you enable these features using the new feature flags settings, which you can open from the Develop menu by selecting Feature Flags. Feature flags are what were previously called Experimental Features in Safari. Feature flags are organized by topic, like Animation, CSS, JavaScript, Media, and more to make it easy to find features. And features are searchable as well. For example, we can search for color to find all the related features. Enabling features is quick too. Just the tick of a checkbox and you're ready to go. And you can quickly see enabled features at a glance, like here where CSS Masonry Layout has been enabled and is displayed in a bold font to indicate the nondefault state.

You can learn more about upcoming features like Masonry Layout and other new CSS features shipping in Safari this year in "What's new in CSS." You may also have noticed on the right-hand side of the window are statuses for each feature. Each feature is categorized into one of four statuses. The first status, Stable, represents features that have recently begun shipping in Safari and are on by default. These features can be toggled to help determine if a feature is causing an issue, or to make sure your site still gracefully handles the absence of the feature for features not yet shipping in all browsers. Stable features will eventually be removed from the list of toggleable features. Next, testable features are those that aren't quite ready for prime time but that may be ready for early feedback or are in the process of being implemented. They may not be fully complete, but testable features can help inform the standards the feature is based on to make sure the spec works for web developers. These features are disabled by default. The last common feature status is Preview. This status is for features that are ready for developers to begin testing. These features are more complete than testable features but may still have bugs. While these features are disabled by default in Safari, they are enabled by default in Safari Technology Preview. Safari Technology Preview is released approximately every two weeks and provides early access to the latest updates for web platform features before they appear in the version of Safari included across our platforms. There is also a feature status for developer features. These can be settings that adjust the behavior of WebKit for development or reenable deprecated API for testing. Please keep in mind that the default setting for each feature flag is how your customers will generally experience your content. It's also important to remember that feature flags are automatically reset to their default states when you update Safari. And with that, we come to the end of our tour of the tools and features available in Safari to help developers like you. And we've only brushed the surface. In addition to everything we've talked about today, Safari has even more to help you debug your content, including all of these features and enhancements in Safari this year. We've also written new documentation for Safari features for web developers to make it easier than ever to discover what tools are available and how to get started with them. Additionally, you can find in-depth documentation for Web Inspector on webkit.org to help unpack the breadth and depth of features in Web Inspector. We also would love to hear from you. If you come across a bug, or have a suggestion on how we can improve our features for web developers, please file feedback in Feedback Assistant and select Safari as the area for your feedback, and then under Details, choose Developer Tools. I hope you've enjoyed our time here today taking a tour of the features in Safari you can use to help you develop, refine, and test your content across our platforms. And we can't wait to see what you build. Thank you. ♪