The Develop Menu
The Develop menu contains a set of tools to assist you in prototyping, debugging, and optimizing your website:
Open Page With—Open the current webpage in another web browser. Any app that registers as a viewer for HTTP URLs appear here.
Show Web Inspector—Open Web Inspector.
Show Error Console—Open the console in Web Inspector. See “The Console.”
Show Page Source—Open the Source Code in Web Inspector to see the HTML of the current page. See “Source versus DOM.”
Show Page Resources—Open the Resources navigation sidebar in Web Inspector to view all images, scripts, and style sheets attached to the current page. See “Resources and the DOM.”
Show Extension Builder—Open Extension Builder to install, modify, create, or uninstall a Safari extension. See Safari Extensions Development Guide.
Empty Caches—Delete all caches stored by the browser. Select this if you’re suspicious that your webpage is using stale cached content.
Disable Caches—Turn off caching to see how a website loads the first time. Select this if you’re suspicious that your webpage is using stale cached content.
Disable Images—Turn off image display and view websites as text only.
Disable Site-specific Hacks—Use this to disable the modifications to Safari and test your site for correct operation (if Apple engineers have modified Safari specifically to work around a problem with your website).
Disable Local File Restrictions—Disable security checks that may prohibit local development.
Enable WebGL—Turn on the ability to view OpenGL content in Safari.
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 A-1.
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 edit to any string you like.
Snippet Editor provides an interactive sandbox for previewing HTML and CSS, as shown in Figure A-2.