Safari Technology Preview: A Browser for Developers

Safari Technology Preview
Getty Images (Credit: TommL #183805032)

Up until now, Web developers keen on validating their code against the latest version of WebKit had to go through the process of obtaining and installing Apple's nightly builds. While not the most convenient method, proactive programmers looking to stay on top of things made do with what was available. Things have improved greatly in this area, however, with the release of Safari Technology Preview.

First made available in late March, this standalone app runs alongside the current version of Safari; making it easy for developers to simultaneously work with both upcoming technologies as well as what is currently being used by the general public. Not only is Safari Technology Preview built upon the most recent version of WebKit, it also features CSS, HTML and JavaScript updates which will eventually become part of an official release. If that wasn't enough, the preview edition also gives you access to the newest version of Web Inspector as well as Responsive Design Mode to test your apps and pages across most device types including iPad and iPhone. Another thing that Safari Technology Preview makes easier for the developer community is submitting feedback, achieved via the Apple Bug Reporter; accessible from the app's Help menu.

One notable feature missing from the aforementioned WebKit Nightly builds is iCloud support, a convenience included in this application which allows developers to access their Reading List and bookmarks while they code and troubleshoot.

Some highlighted features in the first version of Safari Technology Preview were a new high-throughput JavaScript JIT compiler, ECMAScript6, the latest version of the Shadow DOM specification, as well as the ability to programmatically copy or cut text based on user gestures. A second version was already released on April 13, featuring dozens of changes; many in direct response to developer requests and bug reports.

Although the target audience here is obvious, anyone can download or update Safari Technology Preview through the Mac App Store without the need for a developer account.

Safari Technology Preview: Developer Tools

For those readers not already familiar with Safari's integrated developer toolset, below is a brief overview of some of its more useful features.

  • Open Page With: Provides the ability to open a Web page in any of the other browsers which you have installed, directly from the Safari menu.
  • User Agent: Allows you to choose from dozens of user agents from various browsers or to utilize your own user-defined syntax.
  • Responsive Design Mode: Displays Web pages as they would appear on a number of different device types and screen resolutions.
  • Web Inspector: Serves as the main hub for Safari's developer toolset, located at the bottom of the browser window by default and typically offering the following components: Console, Debugger, Elements, Network, Resources, Storage, and Timeline.
  • Error Console: Presents searchable log data as well as various errors and warnings.
  • Show Page Resources: Displays available source code for a Web page, broken down by each document.
  • Timeline Recording: Depicts a real-time snapshot of JavaScript execution, network requests and rendering data.
  • Allow JavaScript from Smart Search Field: Lets developers enter and execute URLs containing javascript: in Safari's address bar.
  • Treat SHA-1 Certificates as Insecure: With the SHA-1 algorithm's widely documented problems, Safari allows you to automatically classify them as insecure.
  • Site-specific Hacks: On occasion, Safari will be modified to accommodate issues with a specific site or sites. This option provides the ability to temporarily override those modifications.
  • Local File Restrictions: With this option, developers can grant Safari access to files on their local hard drive.
  • Cross-Origin Restrictions: Restrictions to stop XSS and related vulnerabilities can be temporarily disabled if necessary.

    In addition to the above tools, you can also disable a number of features and components from Safari Technology Preview's Develop menu. This includes preventing JavaScript from being executed, server-side and cached images from loading within a page, extensions from running, and more.