You should now see any iDevices (virtual or real) that you have connected and running with your mac. On your mac, open Safari and go to "Develop". Now that you have either iOS Simulator open or your iDevice connected to your mac via USB (or both!), you’re ready to start using web inspector on your website. If you can’t see "Develop" in the menu bar, go to the menu bar and click "Safari > Preferences > Advanced" and select the "Show develop menu in menu bar" checkbox. You’ll know you have them turned on if you can see "Develop" in the menu bar. Mobile Safari: On your real iDevice or in iOS simulator go to "Settings > Safari > Advanced" and turn on "Web Inspector".ĭesktop Safari: If you don’t already, ensure you have developer tools in Safari turned on. Virtual Device Method: If you’re going to use iOS simulator, open Xcode, then right-click on the dock icon and choose "Open Developer Tool > iOS Simulator". ![]() Real Device Method: If you’re going to use a real device, connect it to your mac via USB. You must enable the developer tools and web inspector in the desktop and mobile versions of Safari. To ensure you’re running the correct version of Xcode, open Xcode and choose "Xcode > About Xcode" Step 2: Turn on Developer Tools To ensure you’re running Lion, click on the Apple logo in the menu bar and choose "About this Mac" To check if you’re running Safari 6 go to Safari’s menubar and click "Safari > About Safari". Xcode 4.5 with iOS 6 SDK ( available in the app store)Ĭhecking Software versions: To check if you’re running iOS 6 on your iDevice, go to "Settings > General > About" on your device.Virtual Device Method: To use web inspector in tandem with iOS simulator, you’ll need the following: An iDevice (iPhone, iPad, iTouch) running iOS 6.Real Device Method: To use web inspector in tandem with a real iDevice, you’ll need the following: Step 1: Ensure You’re Up to Dateīecause debugging mobile devices with web inspector is a new feature, you’ll have to make sure you have all the latest software. We’ll cover both of these methods and let you choose which one suits your situation best. Virtual Device Method: Use the iOS simulator, which is part of Xcode.Real Device Method: Use a real iDevice (iPhone, iPad, etc) connected to your computer via USB.There are two methods for using web inspector in mobile Safari: Also, Safari 6 is only available for Macs running OSX Lion or higher. You can only debug using the remote web inspector on a Mac. This tutorial will show you the simple process of getting setup to debug mobile websites using Safari’s web inspector.īefore we start, a note on compatibility: There’s a bit of bad news for those using Windows. So it has become imperative that a designer’s debugging tools for mobile devices become more performant and match those of their desktop counterparts.Īpple’s new software releases of iOS 6 and Safari 6 bring many of the features of desktop browser debugging tools we all know and love to mobile devices. They have different memory capacities, performance potential, input devices, and network connectivity. However, mobile and desktop platforms are acutally quite different. Thus, most designers/developers build and tweak their websites on the desktop using one of these browers, assuming the similarities resulting from the webkit engine will render the page equally the same on a mobile device. ![]() As Safari and Chrome both run on the webkit engine, there are many similarities in the way the desktop and mobile browser render a web layout. All extremely powerful tools in web development.īe that as it may, up to this point debugging websites and web applications on mobile devices has been a hassle. Modern browser developer tools have been an immense help in building websites and web applications. Follow this tutorial and you’ll have some powerful debugging tools for mobile iDevices at your fingertips in no time. Best of all? It’s a simple process to setup. ![]() With the recent release of Safari 6 and iOS 6, you can now use web inspector to build and debug websites on the desktop and on mobile Safari. But we don’t have those tools for devices like the iPhone and iPad … that is, until now! On the desktop we have powerful debugging tools most browsers have a web inspector of some kind. ![]() Building and debugging websites and web applications for mobile devices can be a hassle.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |