Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.This past weekend, we highlighted a couple of screenshots from a hacked version of the iOS 7 simulator that supports the iPad, and we also provided some steps to tweak the simulator yourself. With Safari 9 and OS X 10.9 Mavericks, Apple introduced Responsive Design Mode in Web Inspector. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel. With Web Inspector open, developers can inspect all the resources on a web page. Your attached iPhone or other iOS device appears in the Develop drop-down menu. Click Develop in the Safari menu bar and click Show/Connect Web Inspector Select the box next to Show Develop menu in menu barĥ. Click the Advanced tab in the Preferencesģ. Click Safari in the menu bar and choose PreferencesĢ. Plug your device into the computer using a cableġ. To use the Web Inspector, connect your iPhone or another iOS device to a Mac that's running the Safari web browser. Toggle the slider next to Web Inspector to the On position Scroll to the bottom of the screen and tap Advanced menuĤ. Scroll down until you reach Safari and tap on it to open the screen that containsĮverything related to the Safari web browser on your iPhone, iPad, or iPod touchģ.

Tap the Settings icon on the iPhone Home screenĢ. However, developers can activate it in just a few short steps. The Web Inspector is disabled by default since most iPhone users have no use for it. Web Inspector is only compatible with Mac computers Note: Information in this article applies to iPhones and other iOS devices running iOS 6 through iOS 12 and Macs on Mac OS X 10.5 Leopard and later unless otherwise notedĪctivate Web Inspector on iPhone iOS 6 and Later To use Web Inspector, you connect the iPhone to your Mac computer with a cable and open the Mac's Safari, where you enable the Develop menu in Safari's Advanced Preferences. You can activate this in the Safari settings on the iPhone or another iOS device.

Whenever Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each are displayed in the debuggerĪll the recent versions of iOS use Web Inspector instead. If you have an iPhone running an early version of iOS, you can access the Debug Console through Settings > Safari > Developer > Debug Console. Before iOS 6, the iPhone's Safari web browser had a built-in Debug Console that developers used to track down web page defects.

Simulate iphone safari on mac