Debugging for iPad or iPhone
All Apple devices include debugging facilities that are added by Apple engineering teams to develop and debug specific subsystems. Many of those facilities stay in the released system package and you can use them to rectify your code. Here’s a complete guide on how to use developer tools for debugging when developing for the iPad or iPhone.
Steps To Activate Web Inspector on iPad or iPhone
The Web Inspector is disabled by default. However, developers can activate it only by some steps. Here’s how:
- Choose the Settings icon on the iPhone Home screen. The Settings screen will open.
- Choose Safari from the list of software packages accessible on your device. The Safari Settings screen will open.
- Scroll to the bottom and Choose the Advanced menu. The Advanced screen will open.
Please check the following screenshot:
After Following these steps you need to Connect iPhone to Safari on On your Mac.
Connect iPhone to Safari on a Mac
To use the Web Inspector, connect your iPhone or other iOS devices to a Mac that is running the Safari browser. Plug your device into the pc using a cable.
With Safari open, do the following:
- Click Safari within the menu bar and select Preferences.
- Click the Advanced tab in the Preferences.
- Select the box next to Show Develop menu in the menu bar.
- Exit the settings window.
- Click Develop within the Safari menu bar and choose Show Web Inspector.
- Now you can see your attached iPhone or other iOS device appears in the Develop drop-down menu. Your device will appear to your phone’s name like ABC’s iPhone.
- Then next to your phone name an arrow will appear. This should open another dropdown that lists whatever browser you’ve opened on your phone.
Please Check Following Screenshot to connect iPhone with safari and start debugging:
You have to open the browser window on your phone or else you won’t see it listed within the dropdown. When you see your project’s URL, select it. This will open the Safari Console. Once the Safari Console is open, now you can see the interaction between the console and the DOM on your mobile web browser. When you open the inspector and wave over an HTML element, that element is highlighted within the DOM.
Safari Development tools offer a lot of options and settings for development, so developers can inspect all the resources on a web page. The Web Inspector window contains editable HTML and notes relating to the designs and layers of the web page during a separate panel. Apple introduced Responsive Design Mode in Web Inspector. Developers use this inbuilt machine to preview how the scale of the websites completely different screen sizes, resolutions, and orientations.
Those who want to pursue their careers in the IT industry, our extensive and elaborated Computer Certification exam is available for both beginners and experts. This exam will help with a deep analysis of your skills in different functionalities of computer systems.