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.
The iPhone’s safari application had an inbuilt debug Console that developers used to capture website defects. Web Inspector is a tool that is used by web developers to change, debug, and optimize websites on both Macs and iOS devices. By using Web Inspector iPhone detects CSS, HTML, and JavaScript errors and details of each are displayed in the debugger. To Access the Web Inspector you need to activate it in the Safari settings on the iPhone or iPad device and you need to connect the iPhone to your Mac computer with a cable and open the Mac’s Safari, where you enable to Develop menu in Safari’s Advanced Preferences. Web Inspector is only compatible with Mac computers.
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.
- In advanced settings, enable JavaScript (if it isn’t already enabled) then enable Web Inspector.
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.
The Safari Console additionally offers tabs just like Chrome Console, you saw the Elements tab, where you’ll be able to inspect the DOM elements. Then there’s the Debugger tab, wherever you’ll be able to view your JavaScript. There’s also the Network tab, to observe your web activity, Timeline to assist track requests, rendering and JavaScript Events. You can also check warnings and error alerts.
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.
