10/8/2021 0 Comments Debug Mac Safari Ipad Emulator
I have heard of people running over to Best Buy or an Apple Store to quick debug something on a display machine. No Mac Use an online emulator. Select the page for debugging.Select the real device (which must have Safari open on some website) and you’ll get a DevTools instance of that website.This allows us to not only see what a page will look like, but also drill down into whatever other metric we want to investigate, knowing that we’re seeing is how the remote device is actually processing the page, not simply a good estimate by an emulator.Today we’re going to look at two examples of how this can be done: Chrome on Android and Safari on iOS. Remote DebuggingRemote debugging is simply the ability to connect a remote device (say a phone or tablet), and then use our local browser tools to see (and control) what’s happening on that device. The tools to inspect these things are already in the browsers (Dev Tools or Web Inspector, for instance), but how can you use them to see exactly what’s taking place under the hood on our mobile devices?That’s where Remote Debugging comes in. Or maybe you want to get more data on network, rendering, or JavaScript performance. Xcode -> Preferences -> Components -> Just chose what you need.Perhaps what you’re seeing on a real device doesn’t match up with the emulator, and you need to nail down what’s going on.What you have to do is to go to ‘Settings’ > ‘About Phone (or Tablet or Device)’ and then tap on the ‘Build Number’ 7 times (yes, 7 times). How to do this is not readily apparent when looking through the phone settings. Chrome on AndroidIf you have an Android device you want to connect to, the first step is to enable ‘Developer Options’ on the device.If you select it, you’ll see the tabs that are currently open on the remote device.Here, you can enter a new URL to open on the remote device, or you can click on ‘Inspect’ if the tab is already open. Go to the page you want to debug, and go to Dev Tools > More Tools > Remote Devices.If this is the first time your machine has connected to your remote device, you’ll see a message asking you to authorize debugging on the device.Under the Remote Devices tab in Dev Tools, you’ll now see your device name listed under Devices. Here, you’ll need to enable ‘USB debugging.’Once these are enabled, you can go to Chrome on your desktop/laptop.
![]() Debug Safari Ipad Emulator Mac Use AnA Useful ToolAlthough remote debugging may not be something you use a lot, it is handy to have available when needed. On your desktop, you should now see the name of the tab(s) that are open remotely listed.Click on the name of the tab you want to inspect, and Safari will open up a new Web Inspector tab locally that will be tied to the page that’s showing up remotely.Apple has an article describing the process if you want more information. If iOS Safari is not already open on your remote device, open it now. Under ‘Advanced’, turn on ‘Web Inspector’.Once your remote device is connected to your desktop via USB, it should appear under the ‘Develop’ dropdown in your desktop Safari. This is done by checking the “Show Develop menu in menu bar” within the Advanced section of Safari’s preferences.On your iOS device, go to Settings, and tap on Safari. Safari on iOSFirst, make sure the Develop menu is turned on for your desktop Safari. Remote debugging also provides us the ability to keep an eye on actual performance metrics, not emulated ones.
0 Comments
Leave a Reply. |
AuthorChristine ArchivesCategories |