- Is this just a small-screen problem?
- Does it seem actually specific to Safari? Lemme check Desktop Safari first since that’s just a few clicks away.
- No Mac? Use an online emulator.
- Connect your ios device to safari on a mac
- Solution
- Step 1) download xcode
- Tools — safari — apple developer
- What is web inspector?
Is this just a small-screen problem?
Lemme just use the device mode in Chrome quick.
Does it seem actually specific to Safari? Lemme check Desktop Safari first since that’s just a few clicks away.
Now you’re actually using Safari, which is way closer to iOS Safari than desktop Chrome is.
No Mac? Use an online emulator.
I have heard of people running over to Best Buy or an Apple Store to quick debug something on a display machine. But that’s — uhhhh — not super practical. You can use something like CrossBrowserTesting to do this right on the web.
They even jack Chrome DevTools in there somehow. I just did a little testing and I found the Chrome DevTools a little janky to use (a giant left panel renders, the click-to-select element feature didn’t work, and I kept losing WebSocket connection). But hey, it’s cool that it’s possible.
Connect your ios device to safari on a mac
To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu.
With Safari open, select Safari from the menu bar and choose Preferences.
Select the Advanced tab.
Select the Show Develop menu in menu bar check box and close the settings window.
From the Safari menu bar, select Develop and choose the name of your attached iOS device, then select the URL that appears under Safari to open the debug console for that site.
After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.
Solution
I recorded a tutorial video of this solution, step-by-step, to go along with this post:
Step 1) download xcode
The iOS Simulator is an app that comes bundled with Xcode. Xcode is free and you get it from the app store.
Tools — safari — apple developer
What is web inspector?
Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.
Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.
With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.
