HOW TO DEBUG IPHONE AND IPAD WEB APPLICATIONS, USING SAFARI.

If you are a web developer or web designer and a client ask you to develop a responsive web site for sure you have made your self the question: How can I debug mobile web sites?

The following tutorial explains a free option for iPad, iPhone or iPod using Safari.

1- On the device go to: System Preferences / Safari / Advance /  and activate the "Web Inspector"

2- Make sure you have the Develop window menu active in Safari.

If not, go to Safari / Preferences  and under the Advance menu activate the "Show develop menu in menu bar" check box.

safari-debug-menu-active.png

 

3- Connect the device to the computer using the USB cable.
 

4- On the device visit the web site that you want to debug using Safari.

If you are working locally you can visit the IP address of your computer.
 

5- On Safari ( computer ) under the Debug Menu you will see your device listed, and under the device the web sites available for debugging.

active-device.png

 

NOTE: If you are using Android follow this tutorial. 
https://developers.google.com/chrome/mobile/docs/debugging

Enjoy it...

alarez's picture

Posted by alarez

Alain has been involved in the web industry for the past 10 years as a Graphic Designer, FrontEnd Developer, Drupal Developer, Project Planner and Consultant. He is used to work closely with clients turning ideas into achievable tasks and measurable outcome. Given his 6+ years of Drupal experience he stays close to the developers trying to refine working processes and deliver optimal results. "Through all my years as a designer and developer I have come to the conclusion that in order to learn something, you have to do it wrong the first time. Is good to be wrong, so you can learn something from the experience"

Our Drupal Contributions

Take a look at our Drupal Give page, where we are listing some of the contributions that our team have done to the Drupal project.