Prototyping Your Website
The Safari developer tools can help you answer the technical questions in a streamlined and efficient manner.
The Prototyping Process, Improved
It’s common to prototype a website by creating a combination of HTML, style sheets, and scripts, load the combination into a browser, see problems, modify the source—or multiple sources—then reload the page to see the results. It's a cumbersome and sometimes painful process.
Here’s how Safari can help:
Once you have a prototype, load it in Safari and use the console to spot hidden errors that Safari is dealing with for you—other browsers may deal with them differently. Correct the errors to maximize your chances of compatibility.
If you use the user agent string to execute various code branches that are intended to execute on different browsers or devices, choose User Agent String from the Develop menu to modify the user agent string and invoke the code branches in your website, making sure that each browser is being shown what you intend. Resolve the question of proper code branch versus browser differences in advance.
Finally, you can test your prototype using other browsers or web apps by invoking them directly from the Develop menu in Safari.
Using the Snippet Editor
Using the Error Console
Opening the Error Console
There are several ways to open the Error Console. You can choose Show Error Console from the Develop menu, or you can click Current Log in the Log navigator of Web Inspector, as shown in Figure 2-2.
You also have access to the Quick Console—a console available at the bottom of the content browser of Web Inspector—by clicking the Console area (the blue greater-than sign), or by pressing the Esc key.
Any errors encountered when loading a website appear under the Issue navigator. Clicking an error opens the troublesome line in the source code.
To view warnings along with errors, click Current Log under the Log navigator. Errors and warnings are shown with a URL link to the resource that generated the problem, the line number (where applicable), and a brief description of how Safari dealt with the problem.
To display a variable's current value, type the variable name and press Enter.
Changing the User Agent String
This can be useful to quickly test your code to see if it is reacting to various user agents as you expect, without having to actually load the page in multiple versions of multiple browsers. The User Agent submenu is shown in Figure 2-3.
You can choose the common versions of most popular browsers from the submenu. Note that the list includes the versions of Safari found on iPhone, iPad, and iPod touch.
The Other... menu item opens a sheet showing the default user agent string, which you can inspect and edit to any string you like.
If your website has different code branches for different browsers, and loading the site in a given browser reveals problems, first question whether the code has actually branched as expected. By changing the user agent string in Safari, you can isolate the code branch from the browser differences. You can also log the code branch to the console and check for it using Web Inspector’s console.
Switching to Another App
When first testing a website, you typically open it in several browsers—such as Safari, Internet Explorer, and Firefox—to make sure that it works correctly in all cases. The Open Page With command is a convenient way to open the current webpage in another browser, without having to leave Safari, open the other browser, and navigate to the page.
Choose Open Page With from the Develop menu. A submenu is displayed listing all the apps that the operating system knows can open the page.
© 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-07-23)