Enhance Safari’s Testing Features with Extensions
When testing your newly designed mobile-commerce website, sometimes it’s easier to work with what you have. If you already have Safari or Chrome installed on your computer, you’re in luck. They render mobile sites similarly to how they would be rendered on an iOS device, and they have development tools built in that can help you troubleshoot your code.
The Safari Extensions Gallery has program add-ons that can help you test your iPhone/iPad mobile website more accurately on your desktop computer.
In the following list are some Safari extensions for iPhone/iPad web testing:
ReSize Me adds a toolbar that automatically resizes the Safari browser window to six preset sizes, including 640 x 480 and 1024 x 768. Unfortunately, ReSize Me doesn’t yet support the smaller 320 x 480 size of the iPhone. (You can always resize the window yourself in the meantime.)
Combine the User Agent Switcher with Resize Me to get a good idea of how a site will look on a variety of different mobile devices using Safari on a desktop computer.
SafariSource: Using the Safari Source extension, you can view the source code behind any page on the web with the benefits of line numbers and color syntax highlighting. You can even open the source code in a new tab with this plugin. Adding colors and line numbers makes it easier to find errors and conflicts in your code.
Unicorn: The Unicorn extension adds the W3C validators for CSS and HTML to the Safari web browser. Although you can test any web page online with the online validators from the W3C, this extension makes the process faster and easier.
Most Safari extensions are free, although some developers ask that you donate money if you like how they work.