Web Development Tools

Apple has brought its expertise in OS X and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. To access these tools, enable the Develop menu in Safari’s Advanced preferences.

Web Inspector Image

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. With Web Inspector, you see Safari’s developer tools in a clean, unified interface designed to make developing web applications for OS X and iOS more efficient. In OS X El Capitan, the enhanced design provides a more intuitive experience, placing each of its core functions in separate tabs.

Elements. View and inspect the elements that make up the DOM of a webpage. The rendered HTML is fully editable on the left and details about the webpage’s nodes, styles, and layers are available in the sidebar on the right.

Network. See a detailed list of all network requests made to get every webpage resource including documents, images, scripts, stylesheets, XHRs and more.

Resources. Find every resource of a webpage, including documents, images, scripts, stylesheets, XHRs and other resources that make up a webpage, in a list organized by type.

Timelines. See the activity of an open webpage, such as network requests, CSS rendering, and JavaScript events, neatly plotted on a timeline or recorded by frame.

Debugger. Use the debugger to help you find the cause of any JavaScript errors on your webpage. You can set break points which allow you to pause script execution and easily observe the data type and value of each variable as it’s defined.

Console. The console offers a way to interactively debug and modify the content of your webpage using JavaScript commands.

Storage. Find details about the data stored by a webpage such as cookies, local storage, session storage, application cache and index.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. The Responsive Design Mode provides a simple interface for quickly previewing your webpage across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. In addition, you can click on a device to toggle its orientation, taking it from portrait to landscape and even into Split View on an iPad.

Safari Responsive Mode