Show Want to Support Me? Get two free stocks valued up to $1,850 when you open a new Webull investment account through my referral link and fund the account with at least $100! Have you ever needed to debug a website (especially JavaScript or CSS) in Safari on an iOS device but didn’t have a Mac handy? I ran into this problem, and after hours of trying other ways to debug, I finally discovered a pretty easy way to load up a debug interface on my Windows 10 PC that displayed debug info about a website in Safari on an iPad Mini. [update 10/20/2019 – I’ve heard reports that this solution only works in iOS 12 and below, not iOS 13 and up. I can neither confirm or deny.] [update 5/6/2018 – I previously included a solution that used WebIDE in the Mozilla Firefox browser, along with the Valence plugin. At some point, possibly beginning with iOS 9, that solution stopped working. I recently had a chance to try some other solutions and found an even easier solution that works with Google Chrome DevTools!] Thankfully, this solution uses the Google Chrome browser on your PC and the built-in Chrome DevTools that you should already be used to, but the content is coming from the website in Safari on the iOS device. According to what I’ve read online, it appears this solution only works with Windows 8 and up, so this may not work on Windows 7. Let’s get to it! SolutionI recorded a tutorial video of this solution, step-by-step, to go along with this post:
It should take you around 5 minutes to set this up, and you can be debugging a website in no time! Using iOS 11?You may need some extra steps to get this working on an iOS 11 device. Evidently, the version of the remotedebug-ios-webkit-adapter downloaded via npm is broken for iOS 11. The user bdice wrote a post on the remotedebug-ios-webkit-adapter Github Issues page describing how he was able to get this working on Windows 10 with an iOS 11 device. I tested it out, and here’s the lowdown:
After you have jumped through all these hoops, I would restart Windows PowerShell (as Administrator!), restart Chrome, and unplug then plug back in your iOS device, just to be safe. After doing so, go back to step 6 above, and when you get to step 9, you should now see your device under the list of Remote Targets! I tested this out, and it definitely worked! Your Turn!Have you tried debugging a website in Safari on iOS with a Windows machine before? How did it work out for you, and what tool(s) did you use? Or did you have a problem with this solution you’d like to discuss? I’d love to hear from you, so let’s discuss in the comments below! Want to Support Me? Get two free stocks valued up to $1,850 when you open a new Webull investment account through my referral link and fund the account with at least $100! Can you debug on iPhone?Can You Debug iOS Apps On An iPhone? You can debug iOS apps directly on an iPhone. You just need to connect the iPhone to your Mac with Xcode installed, and configure all of the permissions to run the app on a real device instead of on a simulator.
How do I remote debug my iPhone? Go to Safari menu and select Preferences.. Go to Advanced option.. Check "Show Develop menu in menu bar". Install Safari Technology Preview https://developer.apple.com/safari/technology-preview.. Go to Finder and select Applications.. Open Safari Technology Preview application.. How do I debug iOS in Chrome?Near the top of the menu you should see your iPad or iPhone listed. Hover over your device in the menu and you'll see Safari with each tab listed below. Click the one you want to debug. The Web Inspector should then appear, now debug it: Elements, Console, Sources, Network, all of it should work!
How do I enable USB debugging and developer options on iPhone?As indicated by the alert, to enable Developer Mode go to Settings > Privacy & Security on the iOS device. Scroll down to the Developer Mode list item and navigate into it. To toggle Developer mode, use the “Developer Mode” switch. Tap the switch to enable Developer Mode.
|